Ajax请求数据的过程~详解

Ajax 全名为： Asynchronous JavaScript and XML 异步的JavaScript和XML

Ajax技术可以向服务器请求额外的数据而无需卸载页面

Ajax技术的核心是XMLHttpRequest对象（简称XHR） XHR提供的接口实现了以异步的方式向服务器请求数据和解析服务器响应。

Ajax优点

1.页面无刷新

2.使用异步的方式与服务器通信

3.不需要插件

Ajax缺点

1.不支持浏览器的回退机制

2.易造成脚本攻击，sql注入

3.对搜索引擎的支持较弱

4.手持设备不能很好的支持ajax

XHR对象的用法

1.通过调用open方法，启动一个请求等待发送，并不会真正发送数据。

xhr.open(method, url, async)

method：以何种方式请求数据 get / post

url：请求的url *注:url为相对于执行代码当前页面

**注：Ajax受同源策略限制，所以，只能向同一个域中使用相同端口号和协议的url发送请求

async：true / 默认值请求是异步的，

false 请求是同步的，会阻塞后续对send（）的调用，直到响应完全接收

2.通过调用send（）方法，发送特定的请求

　　xhr.send（null）

　　　　send方法接收一个参数，作为请求主体发送的数据，若不需要通过请求主体发送数据，则传入null

3.通过调用abort（）方法来取消异步请求。

　　xhr.abort（）

XHR的属性

1. status 响应的HTTP状态，

2.readyState 表示请求 / 响应过程的当前活动阶段。

　　0 ：未初始化，尚未调用open（）方法，

　　1：启动。调用open（）方法，但未调用send（）方法

　　2：发送。已经调用send（）方法，但尚未接收到响应

　　3：接收。已经接收到部分响应数据。

　　4：完成。已经接收到所有响应数据。而且已经可以在客户端使用。

3.responseText 作为响应主体被返回的文本

Ajax请求过程

1.创建XmlHttpRequest对象，ActiveXObject兼容IE浏览器

　　let xhr = XMLHTTPRequest（）

　　let xhr = ActiveXObject('Mircosoft.XMLHTTP');

2.创建与服务器的连接的请求

　　xhr.send(get, url, false)

3.监听对象状态的改变

　　xhr.onReadyState()

4.向服务器发送数据

　　xhr.send()

5.处理请求回来的数据。

　　callback()

封装一个自己的ajax 吧~

function Ajax(method, utl, async, data, callback){
    var xhr = null;
    if(window.XmlHttpRequest){
        xhr = new window.XmlHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XmlHTTP");
    }
    method = method.toUpperCase();
    if(method == "GET"){
        xhr.open("GET", url+"?"+data, async);
        xhr.send();
    }else if(method == "POST"){
        xhr.open("POST", url, async);
　　　　　//建议使用自定义的头部字段名称
        xhr.setRequestHeader('myheader', 'myvalue');
        xhr.send(data);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                callBack(xhr.responseText);
            }else{
                console.log("error");
            }
        }
    }
}

Ajax请求数据的过程~详解

猜你喜欢