AJAX 笔记

Posted 2020-07-19 wcu1117

 

一、什么是 AJAX ？

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重
新加载整个网页的情况下，对网页的某部分进行更新。

 

二、创建对象

（1）XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下
，对网页的某部分进行更新。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

(2)老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

所以为了应对不同的版本一般都是用一个判断来先判断再决定创建的对象。
var xmlhttp;if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

三、想服务器发送请求
　　

使用 XMLHttpRequest 对象的 open() 和 send() 方法：
var xmlhttp = new XMLHttpRequest();

xmlhttp.open(method,url,async)；
xmlhttp.send(string);

open方法规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send方法请求发送到服务器。
string：仅用于 POST 请求，可省略。

四、GET 和 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

1）GET - 从指定的资源请求数据。

2）POST - 向指定的资源提交要被处理的数据

 

在AJAX的open方法选GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

3）然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

4）如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

五、AJAX服务器响应

如果要获得从服务器返回的数据，需使用 XMLHttpRequest 对象的 responseText 或
responseXML 属性。

1）responseText：获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
2）responseXML：获得 XML 形式的响应数据。xmlDoc=xmlhttp.responseXML;txt="";

x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

 

 

六、onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。readyState 属性存有
XMLHttpRequest 的状态信息。每当 readyState 改变时，就会触发 onreadystatechange 事件
。

下面是 XMLHttpRequest 对象的三个重要的属性：

1）onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该
函数。
2）readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
3）status：http状态码。
常见的状态码:

HTTP: Status 200 – 服务器成功返回网页

HTTP: Status 404 – 请求的网页不存在

HTTP: Status 503 – 服务不可用

HTTP: Status 1xx (临时响应)->表示临时响应并需要请求者继续执行操作的状态代码。

HTTP Status 2xx (成功)->表示成功处理了请求的状态代码;

HTTP Status 4xx (请求错误)->这些状态代码表示请求可能出错，妨碍了服务器的处理。

HTTP Status 5xx （服务器错误）->这些状态代码表示服务器在尝试处理请求时发生内部错误 。 这些错误可能是服务器本身的错误，而不是请求出错。