ajax介绍、使用场景、用法

写在前面：需要了解一定的HTTP和dom操作相关知识

一、Ajax介绍

1、本质

使用jacascript提供的XMLHttpRequset对象，异步的向服务器发送请求，并接受响应，实际上ajax接受到服务器返回来的数据，并不是完整的页面，而是一条条的数据，这样就可以在不刷新页面的情况下，动态的更新页面中的数据，使浏览器在向服务器发送请求时，不影响用户的其他操作，这就是ajax的异步特性。

2、使用场景

1、搜索引擎的建议搜索功能

2、聊天室功能

3、用户名合法验证功能

二、ajax的使用流程

1、创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();
//简记为“”小黄人“”

2、绑定监听，获取响应数据

xhr.onreadystatechange=function(){
	if(xhr.readyState==4&&xhr.status==200){
		var result=xhr.responseText;
		//result中就是服务器响应回来的数据
		//可以用dom操作把它渲染到页面内
		元素id名.innerHTML=result;
	}
};

3、打开连接，创建请求

get方法

xhr.open("get","url",true);

url—路由+查询字符串
如：/user/login?uname=Tom&upwd=123456
true—同步
false—异步

---

post方法

xhr.open("post","url",true);

url—只有路由，数据在请求主体中发送（不用加查询字符串）

4、发送请求

get方法

xhr.send()

post方法

//设置请求消息类型
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//请求主体，拼接查询字符串 如:uname=Tom&upwd=123456
var formdata='uname='+Tom+'&upwd='+123456
xhr.send(formdata);

将头信息Content-type设置为application/x-www-form-urlencoded视为了传送“&”这个特殊字符，并且一定要在创建请求之后，发送请求之前。

三、XMLHttpRequset的几个属性和方法

1、getAllResponseHeader—获取所有响应头信息

2、getResponseHeader—获取指定的响应头信息

3、open(method,url,isAsyn)—打开链接，创建请求

4、send(body)—发送请求，get方法不需要body

5、setRequestHeader()—设置请求的http头

6、onreadystatechange—接受响应数据时使用，在readyState变化时自动激活。readyState会变化四次。

7、readyState—xhr的请求状态，共有四个值

(1).0—请求未初始化

(2).1—打开连接，正在发送请求

(3).2—请求完成，接受响应头

(4).3—接受响应主体

(5).4—接受响应主体成功

8、status—服务器返回的响应状态码

(1).200—成功

(2).301—永久重定向

(3).304—临时重定向

(4).404—资源未找到

(5).500—服务器错误