Ajax

Ajax = Asynchronous JavaScript and XML

创建XMLHttpREquest对象

var request = new XMLHttpRequest() //构造函数创建对象

兼容IE的写法

var request
if(window.XMLHttpRequest){
   request = new XMLHttpRequest() // Firefox, Chrome, IE7+, Opera, Safari 
}else{
  request = new ActiveXObject("Microsoft.XMLHTTP") // IE6, IE5
} 

HTTP传输
一个完整的HTTP传输过程，通常有下面7个步骤：

1. 建立TCP连接
2. Web浏览器向Web服务器发送请求命令
3. Web浏览器发送请求头信息
4. Web服务器应答
5. Web服务器发送应答头文件
6. Web服务器向浏览器发送数据
7. Web服务器关闭TCP连接

HTTP请求
一个HTTP请求一般由四部分组成：

1. HTTP请求的方法或动作, GET还是POST
2. 正在请求的URL, 请求地址
3. 请求头, 包含一些客户端环境信息, 身份验证信息等
4. 请求体，也就是请求正文, 请求正文中可以包含客户提交的查询字符串信息, 表单信息等等

请求

GET/POST

GET

• 一般用于信息获取
• 使用URL传递参数
• 对所有发送信息的数量也有限制, 一般在2000个字符，直接显示在浏览器地址栏，不安全
• 幂等

POST

• 一般用于修改服务器上的资源
• 对所发送信息数量无限制

HTTP响应
一个HTTP响应一般由三部分组成:

1. 一个数字和文字组成的状态码, 用来显示请求是否成功
2. 响应头, 响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
3. 响应体, 也就是响应正文

响应

状态码

状态码

发送请求
open(method, url, async)
-method: post还是get
-url: 请求地址
-async: true为异步, false为同步

send(string)
string: 主要用于post, 请求内容

request.open("GET", "get.php", true)
request.send()

request.open("POST", "post.php", true)
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
request.send("name=Adam&sex=male")

获取响应
responseText: 获得字符串形式的响应数据
responseXML: 获得XML形式的响应数据
status和statusText: 以数字和文本形式返回HTTP状态码
getAllResponseHeader(): 获取所有的响应报头
getResponseHeader(): 查询响应中的某个字段的值

readyState属性
0: 请求未初始化, open还没有调用
1: 服务器连接已建立, open已经调用了
2: 请求已接收, 也就是接收到头信心了
3: 请求处理中, 也就是接收到响应主体了
4: 请求已完成, 且响应已就绪, 也就是响应完成了

其实readyState主要作用就是来监听浏览器响应变化，下面举个例子

var request = new XMLHttpRequest()
request.open("GET", "get.php", true)
request.send()

//当监听到请求完成时，我们做一些动作
request.onreadystatechange = function(){
 if(request.readyState === 4 && request.status === 200){
   ...
   request.responseText
 }
}

向login传参数案例

Nodejs建立服务器

url组成

url组成

API及用法

API