Ajax

最新推荐文章于 2024-05-01 20:48:21 发布

BSBSDXBD

最新推荐文章于 2024-05-01 20:48:21 发布

阅读量486

点赞数

分类专栏： Web前端文章标签： ajax 前端

本文链接：https://blog.csdn.net/bsbsdxbd/article/details/52156754

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在学习了带着问题去学习的学习方法后，实践后感触良多。

今天说说Ajax吧，学习后做了一些总结如下：

1、这里再次明确下Ajax的正确读音：/ˈeɪ.dʒæks/ /ˈeɪ.dʒæks/ /ˈeɪ.dʒæks/（重要的事情说三遍）

2、全程以及中文名：“Asynchronous JavaScript and XML”（异步JavaScript和XML ）

3、提出人：Jess James Garrett

4、提出时间：1998年左右，谷歌后来做了推广

5、第一个使用该技术：微软的outlook web Access小组

5、到底是什么：Ajax不是新的编程语言，而是一种使用现有标准的新方法。是一种在无需重新加载整个网页的情况下，能够更新部分数据的技术。

6、它的推出解决了什么问题：解决了服务器接收前后两个界面数据相同却需要重新加载浪费时间、带宽、传输过多冗余数据的问题。

7、同步和异步的区别：

同步：发出一个功能调用时，在没有得到结果之前，该调用不返回。（类似于打电话）

客户端发起请求=>等待=>服务端处理=>等待=>响应=>页面载入

异步：发出一个功能调用时，不管有没有得到结果都返回执行别的任务。（类似于发消息）

7、缺点：不是所有的浏览器都兼容，不能在移动端使用，存在安全问题。

8、实践：

第一步：发送一个HTTP请求

需要通过XMLHttpRequest实现使用JavaScript向服务器端发送一个HTTP请求。而Internet Explorer（IE）中引入一个名为XMLHTTP的ActiveX对象实现与XMLHttpRequest相同的功能，Mozilla、Safari和其他浏览器则使用XMLHttpRequest。

如果要兼容各个浏览器的话，可以这样来做：

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

接下来，当接收到服务器端响应时，需要告诉HTTP请求对象使用JavaScript函数来处理响应。将XMLHttpRequest对象的onreadystatechange属性设置为该函数的名称，当请求的状态变化时，该函数会被调用。

httpRequest.onreadystatechange = nameOfTheFunction;

注意：如果使用POST方式发送数据的话，在调用send()方法前，需要设置请求的MIME类型。：

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第二步：处理服务器端的响应

当发送请求时，已经定义了一个函数来处理响应。

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数可以做什么呢？首先，该函数需要检查请求的状态。如果状态值为4的话，这表示接收到完成的服务器端响应，可以继续处理。

if (httpRequest.readyState === 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

readyState的值列表如下：

0 - 未初始化
1 - 正在加载
2 - 加载完毕
3 - 交互中
4 - 完成

接下来需要检查HTTP服务器端响应的状态代码，W3C网站列出了所有的状态代码。下面的例子中，通过是否为200 OK的状态码来判断AJAX调用是否是成功的。

if (httpRequest.status === 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may contain a 404 (Not Found)
    // or 500 (Internal Server Error) response code
}