详解ajax

最新推荐文章于 2022-04-26 22:23:13 发布

AHRL__

最新推荐文章于 2022-04-26 22:23:13 发布

阅读量287

点赞数

分类专栏： JavaScript 文章标签： ajax javascript jquery 异步

本文链接：https://blog.csdn.net/AHRL__/article/details/80144771

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

详解ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）。在没有Ajax之前，想要刷新就只能整个页面刷新，有了ajax以后，可以将特定的位置刷新，实现局部刷新。也就是说，ajax可以单独请求数据，并对获取的数据进行操作。

//初始化一个存储XMLHttpRequest对象的变量
var xhr = null;
//创建XMLHttpRequest对象
function creatXHR(){
    //针对浏览器：IE7以上,Firefox,Opera等浏览器
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        //针对IE6及以下版本，可能的ActiveXObject版本很多，这里只考虑Microsoft.XHLHTTP这一种
        xhr = new ActiveXObject("Microsoft.XHLHTTP");
    }
}

发送请求

请求行
    xhr.open(method,url,async);
    method: 请求方式，GET/POST
    url   : 请求地址
    async : 是否异步传输，true/false。默认为true

请求头
    xhr.setRequestHeader(header,content);
    header : 请求头的名称
    content: 请求头的值
    post请求需要设置头，get请求可以不设置请求头

请求主体
    xhr.send(string);
    string: 请求时向服务器发送的数据，get可以传空，因为在头的时候已经穿过数据了。

实例：

//GET:
    xhr.open("GET","oneurl.php?fname=Bill&lname=Gates",true);
    request.send();
//POST:
request.open("open","oneurl.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=aaa&sex=male")

get和post的区别：
1. get方式：向服务器传递信息，采用的是url问号参数的方式完成的；xhr.open(‘get’,’/index?name=ll&age=3’);
post方式：传递给服务器的数据信息采用的是设置请求体传递；xhr.send(‘name=ll&age=3’)。
2. get请求传递给服务器的数据内容有长度限制，是通过url方式传递，参数过长，到时url地址过长，浏览器对url地址有一个长度限制，谷歌一般限制8kb，火狐7kb，ie2kb；长度限制超过，浏览器会自动截取；
post是通过请求体传递，请求体是没有大小限制的，但是因避免过长，保证传递速度。
3. get请求会参数缓存，因为是通过地址栏传递参数，第二次传递时，参数没有变化，浏览器会将缓存中的数据提取出来，可以通过在地址后加一个变化的随机数来改变url。’/index?name=ll&age=3’+Math.random()。
post没有缓存。
4. 如上所说，get请求是通过url传输，而传递的信息就会显示在地址栏上，安全性无法保证。
涉及安全性时应使用post。

注意：并不是所有的请求头都是可以设置的，有些请求头信息是浏览器控制的

服务器做出响应

监听xhr发送情况

readState属性
    0:  请求尚未初始化，open还没有调用
    1： 服务器连接已经建立，send方法已经调用，正在发送请求
    2： send方法已经完成，且受到全部的响应内容
    3： 正在解析从服务端返回的数据
    4： 解析数据完成，可以在客户端调用该数据

onreadystatechange事件：每次状态码的改变都会触发该事件

状态码：由3位数字和文字构成，用来说明请求是成功还是失败。
1xx：   信息类，表示收到浏览器请求，正在进一步处理中
2xx：   已成功，用户请求被正确接收、理解和处理，如200 OK
3xx：   重定向，请求失败，客户必须采取进一步的动作
4xx：   客户端错误，客户端提交的请求有错误，如404页面：资源不存在
5xx：   服务器错误，不能完成对请求的处理，如500

status属性: 获取状态码，如200
statusText属性：获取状态码文本信息，如OK

http网络状态码：
200：请求成功；
301：永久转移，访问老域名永久指向新域名，就是301永久转移。
302：临时转移，服务器临时转移地址，缓解服务器压力。
304：读取的缓存数据，我们不经常改变的文件比如文件中css，js，我们存在缓存中，页面再次刷新请求服务多次，不怎么改变的文件可以使用缓存。
307：临时重定向
400：请求参数错误
401：请求权限不够
404：地址不存在
500：未知服务器错误
503：服务器超负荷请求，比如一个1000人可以访问的网址，多于一千人访问就会出现503
504：服务器请求响应超时。

获取响应数据

xhr.responseText: 获得字符串形式的响应数据
xhr.responseXML: 获得XML形式的响应数据

以上实例代码：

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.responseText);
        //do something
    }else{
        alert("Error: " + xhr.status);//失败时打印状态码
    }
}

注意：请求完成和请求成功不同，请求完成可能请求失败。