一、同步交互与异步交互
客户端想服务器端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事情的(等)
客户端想服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的(不用等)
二、AJAX
asynchronous javascript and xml,直译中文-javascript和xml的异步
AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
-
Ajax的核心对象
XMLHttpRequest对象
-
获取XMLHttpRequest对象
function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //除IE外的其他浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } -
属性
- readyState 请求状态
0 尚未初始化 1正在发送请求 2请求完成 3请求成功，正在接受数据 4数据接收成功- status 请求响应值
200 表示请求成功 202 请求被接受但处理未完成 400 错误的请求 404 资源未找到 500 内部服务器错误，如asp代码错误等responseText 服务器返回的文本
responseXML 服务器返回的xml，可以当做DOM处理
-
方法
open(method,url) - 与服务端建立连接
send() - 向服务器端发送请求
abort() - 取消请求
getAllResponseHeaders()
得到响应的所有http头getResponseHeader()
获取指定的http头setRequestHeader()
指定请求的Http头 -
事件
onreadystatechange事件
作用 - 监听服务端的通信状态改变当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
三、实现ajax的异步交互步骤
创建XMLHttpRequest核心对象
固定写法-独立编写与服务区建立连接
使用XMLHttpRequest对象的open(method,url)向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value-
接受服务器响应的数据
使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4)
使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200)
使用XMLHttp对象的responseText属性，接受服务器端的响应数据
注意：get与post方式
get请求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 请求参数，添加到url?key=value
post请求方式
必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
异步交互基本步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步交互基本步骤</title>
</head>
<body>
用户名：<input type="text" name="user" id="user" /><br />
<button id="btn">提交</button>
<div id="content" style="width: 100px;height: 100px;border: 1px solid black;">
</div>
</body>
<script type="text/javascript">
/*
*将input中的内容异步提交到服务器，然后将服务器响应回来的内容，放到div里面
*/
document.getElementById("btn").onclick = function () {
//1.创建ajax对象
var xhr = getXhr();
//2.跟服务器建立连接,open第三个布尔参数可以设置同步交互还是异步交互，默认为true，为异步交互，现在ajax已经慢慢的弃用同步交互
/*
*使用get方式提交数据，要将参数提交到url的后面,并且发送时设置发送内容为空
*/
var input = document.getElementById("user");
xhr.open("GET","myphp01.php?user="+input.value);
//3.发送数据,格式为key=value，多个参数用&隔开
xhr.send(null);
//4.监听服务器的响应
xhr.onreadystatechange = function () {
//当数据接收完毕，以及请求成功时，做处理（多出来的两步）
if(xhr.readyState == 4 && xhr.status == 200){
//将响应的内容放到div里
document.getElementById("content").innerHTML = xhr.responseText;
}
}
function getXhr () {
//设置一个空变量
var xhr = null;
//判断是否支持XMLHttpRequest
if(window.XMLHttpRequest){//支持，非IE的方式
xhr = new XMLHttpRequest();
}else{//不支持，IE的方式
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
}
</script>
</html>