AJAX

AJAX

AJAX是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

(一）步骤

1.创建一个异步对象

var xmlhttp=new XMLHttpRequest()

2.设置请求方式和请求地址

xmlhttp.open("GET/POST","url",true)

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）(默认为true）

3.发送请求

xmlhttp.send()

4.监听状态的变化（每当状态发生改变，就会调用该函数）

xmlhttp.onreadystatechange=function (ev2) {
if(xmlhttp.readyState === 4) {
//判断是否请求成功(状态码 xmlhttp.status)
	if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
           //5.处理返回的结果
           console.log("接收到服务器返回的数据")
		} else {
			console.log("接收数据失败")
		}
	}
}

readyState:

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成，且响应已就绪

5.处理返回的结果

console.log("接收到数据")

（二）服务器响应

responseText:获得字符串形式的响应数据(xmlhttp.responsText)

responseXML：获得XML形式的响应数据(xmlhttp.responsXML)

（三）解决IE浏览器数据不更新问题（GET请求）

在IE浏览器中，如果通过AJAX发送GET请求，那么IE浏览器认为同一个URL只有一个结果

也就是说，在第二步的xmlhttp.open("GET/POST","url",true)，AJAX请求的URL中的数据执行一次之后，修改url中的数据，IE浏览器显示的数据不会发生改变

解决办法：URL后加上随机数，让每次的URL都不一样

随机数：

• Math.random()
• new Date().getTime()

例如 xmlhttp.open("GET/POST",url+"?t="+(new Date().getTime()),true)

(四）AJAX封装

function ajax(url,obj,timeout,success,errror)
{

}

• obj:将对象转换为字符串

• timeout:服务器超时，显示发送失败

URL中不可以出现中文，出现中文需要调用 encodeURIComponent 方法