Ajax请求原理

2017-01-13 19:10:01来源:CSDN作者:sinat_34368775人点击

【Ajax】Ajax异步的javascript和XML,也就是说,Ajax就是通过javascript语言,去异步请求之后,得到响应,局部刷新代码。    两个特点:异步请求,局部刷新。
【Ajax的原生开发流程】    1、创建请求对象(异步)        创建核心的XMLHttpRequest请求对象,Ajax编程都是通过这个对象来进行的。注意:浏览器对XMLHttpRequest对象的支持有所不同。不部分浏览器都支持XMLHttpRequest对象    var xhr = new XMLHttpRequest();    在IE6中:    var xhr = new ActiveXObject("Msxml2.XMLHTTP");    IE6一下:    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    2、打开与服务器的链接    创建完请求对象后,通过请求对象的Open()方法,这个方法可以与服务器建立链接。
    open(method,url,flag);    三个参数:第一个代表用什么请求方式,GET或者POST等。第二个参数是要请求服务器的路径,如果你用的是GET请求,如果有参数的话,要拼接在URL后面。第三个参数表示是否是异步请求,默认是异步的。
    var xhr = new XMLHttpRequest();    xhr.open("GET","http://10.xx.xxx:8080/?name=liushengxu&pwd=123",true);
    3、发送请求    打开链接,与服务器建立链接后,在利用请求对象的send()方法,去发送请求    如果用的GET请求,send方法内的参数写null就行,如果是post请求,请求有 参数的话,那么请求参数要写在这send方法内。
    xhr.send(null);    注意:如果是post请求,那么在调用send方法之前,要设置请求头。    xhr.setRequestHeader("Content-type","Application/x-www-form-urlencoded");
    4、接受服务器响应    当请求对象调用完send方法后,就可以等待服务器的响应,请求对象会根据响应的不同状态而触发一个onreadystatechange事件。
    【请求对象的几种状态码:】    0:未初始化完成,只是创建了XMLHttpRequest对象,还未调用open方法    1:初始化完成,请求开始,开始调用open方法,但没调用send方法    2:请求发送,就是说已经调用了send方法    3: 开始接收服务器的响应。    4:读取接收服务器响应后返回的数据。(响应彻底结束)
    当状态码为2/3/4的时候,会触发onreadystatechange事件    我们可以利用请求对象的readyState属性来查看当前的状态码。    真正开发的时候,我们只关心状态码为4的时候。
    【服务器响应的状态码】    200:响应正常(这就是我们最后想要的状态码)    404:找不到要访问的url    500:服务器方面的错误    我们可以利用请求对象的status属性来查看服务器状态码。
    var xhr = new XMLHttpRequest();    xhr.open("GET","http://xxx.html",true);    xhr.send(null);    xhr.onreadystatechange = function () {        if (xhr.readyState == 4 && xhr.status ==200) {        //返回JSon字符串            xhr.responseText;    }}【Ajax】Ajax异步的javascript和XML,也就是说,Ajax就是通过javascript语言,去异步请求之后,得到响应,局部刷新代码。    两个特点:异步请求,局部刷新。
【Ajax的原生开发流程】    1、创建请求对象(异步)        创建核心的XMLHttpRequest请求对象,Ajax编程都是通过这个对象来进行的。注意:浏览器对XMLHttpRequest对象的支持有所不同。不部分浏览器都支持XMLHttpRequest对象    var xhr = new XMLHttpRequest();    在IE6中:    var xhr = new ActiveXObject("Msxml2.XMLHTTP");    IE6一下:    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    2、打开与服务器的链接    创建完请求对象后,通过请求对象的Open()方法,这个方法可以与服务器建立链接。
    open(method,url,flag);    三个参数:第一个代表用什么请求方式,GET或者POST等。第二个参数是要请求服务器的路径,如果你用的是GET请求,如果有参数的话,要拼接在URL后面。第三个参数表示是否是异步请求,默认是异步的。
    var xhr = new XMLHttpRequest();    xhr.open("GET","http://10.xx.xxx:8080/?name=liushengxu&pwd=123",true);
    3、发送请求    打开链接,与服务器建立链接后,在利用请求对象的send()方法,去发送请求    如果用的GET请求,send方法内的参数写null就行,如果是post请求,请求有 参数的话,那么请求参数要写在这send方法内。
    xhr.send(null);    注意:如果是post请求,那么在调用send方法之前,要设置请求头。    xhr.setRequestHeader("Content-type","Application/x-www-form-urlencoded");
    4、接受服务器响应    当请求对象调用完send方法后,就可以等待服务器的响应,请求对象会根据响应的不同状态而触发一个onreadystatechange事件。
    【请求对象的几种状态码:】    0:未初始化完成,只是创建了XMLHttpRequest对象,还未调用open方法    1:初始化完成,请求开始,开始调用open方法,但没调用send方法    2:请求发送,就是说已经调用了send方法    3: 开始接收服务器的响应。    4:读取接收服务器响应后返回的数据。(响应彻底结束)
    当状态码为2/3/4的时候,会触发onreadystatechange事件    我们可以利用请求对象的readyState属性来查看当前的状态码。    真正开发的时候,我们只关心状态码为4的时候。
    【服务器响应的状态码】    200:响应正常(这就是我们最后想要的状态码)    404:找不到要访问的url    500:服务器方面的错误    我们可以利用请求对象的status属性来查看服务器状态码。
    var xhr = new XMLHttpRequest();    xhr.open("GET","http://xxx.html",true);    xhr.send(null);    xhr.onreadystatechange = function () {        if (xhr.readyState == 4 && xhr.status ==200) {        //返回JSon字符串            xhr.responseText;    }}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台