一、 ajax
1.什么是ajax
ajax:是Asynchronous JavaScript And XML的缩,表示的是异步的JavaScript与XML,ajax可以实现网页的动态更新,而且是在不刷新整个页面的情况下,对部分内容进行更新。
2.同步与异步区别
同步:当用户发送请求时,等待服务器响应,在这期间客户端其他代码都无法正常运行。
异步:当用户发送请求时,等待服务器响应,在这期间客户端其他代码都可以正常运行。
二、实现ajax的五个步骤
1.创建请求体
//这里可以进行一下判断看用户是否用IE或者Netscape浏览器
var xhr; //定义一个变量
Create(); //调用创建对象的方法
function Create(){
if(window.ActiveXObject) {//判断是否是IE浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
}else if(window.XMLHttpRequest){//判断是否是Netscape等其它浏览器
xhr = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
}
}
2.调用open方法,设置请求方式和路径
在open方法中有五个参数
第一个参数是请求方式
第二个是请求路径
第三个表示是否异步 默认为true异步
第四个是用户名
第五个是密码 如果需要服务器验证则需要这两个参数
xhr.open("post", "data.php");
// xhr.open("get", "data.php?name=rose&age=99");//数据传递
3.设置请求头,如果是get方法则可以省略
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
4.监听响应完成事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
请求变化有五个状态
1.初始化状态。XMLHttpRequest对象的readyState属性值为0。
2.初始化状态。XMLHttpRequest对象的readyState属性值为1。
3.发送数据状态。XMLHttpRequest对象的readyState属性值为2。
4.接收数据状态。XMLHttpRequest对象的readyState属性值为3。
5.完成状态。XMLHttpRequest对象的readyState属性值为4。
此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。
如果响应完成,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
5.发送请求
xhr.send("name=rose&age=99");//如果是get请求,在路径后进行数据传递
三.封装ajax
function ajax(params) {
if(window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
// 判断type是get还是post
if(params.type == "get") {
params.url += "?" + params.data;
}
xhr.open(params.type, params.url);
// 判断是否为post 如果是post请求 传参使用send方法传参 并且加请求头
if(params.type == "get") {
xhr.send();
} else {
// 传参需要设置请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 发送请求
xhr.send(params.data);
}
// 不传参数时 get和post请求一样
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// 先拿到响应体
var res = xhr.responseText;
if(params.dataType == "json") {
res = JSON.parse(res);
} else if(params.dataType == "XML") {
// 对XML数据进行转换
// 创建转换对象
var parser = new DOMParser();
res = parser.parseFromString(res, "text/xml");
} else {
res = xhr.responseText;
}
params.success(res);
}
}
}