AJAX技术
即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。
-
本质:是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通信。
-
作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；
异步 与 同步(了解)
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
同步：同一时刻只能做一件事，上一步完成才能开始下一步
- 异步：同时做多件事，效率更高,做一件事情时，不影响另一件事情的进行。
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
发送get请求
XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。
//使用XMLHttpRequest发送get请求的步骤
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2. 设置请求行
//第一个参数:请求方式 get/post
//第二个参数:请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=hucc");
//3. 设置请求头
xhr.setReqeustHeader('content-type','text/html');
//浏览器会给我们默认添加基本的请求头,get请求时无需设置
//4. 设置请求体
//get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);
- get请求,设置请求行时,需要把参数列表拼接到url后面
- get请求不用设置请求头
- get请求的请求体为null
发送post请求
var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=hucc&age=18");
-
post必须设置请求头中的content-type为application/x-www-form-urlencoded
-
post请求需要将参数列表设置到请求体中
获取响应
HTTP响应分为3个部分，状态行、响应头、响应体。
//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//1. 获取状态行
console.log("状态行:"+xhr.status);
//2. 获取响应头
console.log("所有的相应头:"+xhr.getAllResponseHeaders());
console.log("指定相应头:"+xhr.getResponseHeader("content-type"));
//3. 获取响应体
console.log(xhr.responseText);
}
}
readyState
readyState:记录了XMLHttpRequest对象的当前状态
//0：请求未初始化（还没有调用 open()）。
//1：请求已经建立，但是还没有发送（还没有调用 send()）。
//2：请求已发送，正在处理中
//3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
//4：响应已完成；您可以获取并使用服务器的响应了。(我们只需要关注状态4即可)
封装ajax工具函数
每次发送ajax请求，其实步骤都是一样的，重复了大量代码，我们完全可以封装成一个工具函数。
//1. 创建xhr对象
//2. 设置请求行
//3. 设置请求头
//3. 设置请求体
//4. 监听响应状态
//5. 获取响应内容
参数提取
| 参数名 | 参数类型 | 描述 | 传值 | 默认值 |
|---|---|---|---|---|
| type | string | 请求方式 | get/post | 只要不传post，就是get |
| url | string | 请求地址 | 接口地址 | 如果不传地址，不发送请求 |
| data | object | 请求数据 | {key:valu} | 需要把这个对象拼接成参数的格式 uname=hucc&upass=12345 |
| callback | function | 渲染数据的函数 | 函数 | 空 |
完整代码
var $={
ajax:function(obj){
//获取用户的参数
var type=obj.type||'get'; //默认请求方式是get
var url=obj.url||location.href; //默认请求当前页面
var callback=obj.callback;
//1-js中使用对最方便接受的参数是对象，但是传递给服务器的格式 name=zs&age=18
var data=this.setParam(obj.data); //name=zs&age=18
// console.log(data);
//封装ajax公共代码部分
//1-创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//模拟http协议
//如果是get请求在url后面拼接参数
if(type=='get'){
url=url+'?'+data;
data=null;
}
//1-请求行
xhr.open(type,url);
//2-请求头 post 必须设置请求头
if(type=='post'){
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
//3-请求主体
xhr.send(data);
//监听服务器的响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4 &&xhr.status==200){
var r=xhr.responseText;//获取响应主体
//r中就是服务器返回核心数据 需要渲染
callback&&callback(r);
}
}
},
//将对象转成 name=zs&age=18
setParam:function(obj){
if(typeof obj =='object'){
var str='';
for(var k in obj){
str+=k+'='+obj[k]+'&';
}
str=str.substr(0,str.length-1); //参数一：开始索引 参数二：截取长度
}
return str;//返回转换后的字符串
}
};
