Ajax

168 阅读2分钟

1. XML介绍

历史中,ajax传递数据是通过xml格式传递的,现在已经被 JSON 取代了。

  • XML 可扩展标记语言。
  • XML 被设计用来传输和存储数据。
  • XML 和 HTML 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签, 全都是自定义标签,用来表示一些数据。
比如说我有一个学生数据:
name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示:
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender></gender>
</student>

2. AJAX 优缺点

  1. AJAX 的优点
    1. 可以无需刷新页面而与服务器端进行通信。
    2. 允许你根据用户事件来更新部分页面内容。
  2. AJAX 的缺点
    1. 没有浏览历史,不能回退
    2. 存在跨域问题(同源)
    3. SEO 不友好

3. http协议

http协议(超文本传输协议),协议详细规定了浏览器和万维网服务器之间互相通信的规则

请求报文

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1.1 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

4.原生ajax

ajax请求在ie浏览器中是有缓存的,所以在请求的时候,我们需要请求路径加上时间戳 http://127.0.0.1:8000/json-server?t=Date.now()

//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送
xhr.send();
// 如果是post请求,send可以加参数
xhr.send('a=100&b=200&c=300');
// 超时设置, 如果超过2s,就报错
xhr.timeout = 2000
// 超时回调
xhr.ontimeout = function() {
 alert('请求超时了')
}
// 网络请求报错
xhr.onerror = function() {
}

xhr.abort() // 可以取消请求
// 如果想反悔json格式的数据
//设置响应体数据的类型
xhr.responseType = 'json';

//4. 事件绑定 处理服务端返回的结果
// on  when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
0 => 未初始化
1 => 调用open方法
2 => 调用了send方法
3 => 服务端返回了部分结果
4 => 服务端返回了所有结果
// change  改变
xhr.onreadystatechange = function(){
    //判断 (服务端返回了所有的结果)
    if(xhr.readyState === 4){
        //判断响应状态码 200  404  403 401 500
        // 状态码只要是2开头的都是成功,及>=200 并且 < 300
        if(xhr.status >= 200 && xhr.status < 300){
            //处理结果  行 头 空行 体
            //响应 
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//响应体
            //设置 result 的文本
            result.innerHTML = xhr.response;
        }else{

        }
    }
}