xhr返回值_数据交互 http请求 xhr

web浏览器通过http请求来获取服务器的数据或服务，http请求是一种无状态连接，用完即关闭，再用需重连接。这么设计能极大地减轻服务器压力。

HTTP请求：

一个http请求分为以下7个步骤：

1，建立TCP连接

2，浏览器向服务器发送请求命令

3，浏览器想服务器发送请求头信息

4，服务器响应

5，服务器发送响应头信息

6，服务器向浏览器发送数据

7，服务器关闭TCP连接

HTTP请求之请求request：

一个http请求一般由4个部分组成：

1，http请求的方法，常见的有get和post

2，请求的url

3，请求头信息，包括一些浏览器信息和用户身份信息等

4，请求体，即请求正文，包括一些用户的查询信息，表单信息等。请求头和请求体有一个空行来分开。

以下是一个请求体示例：

get方法，请求地址，协议版本

GET/login.php HTTP/1.1

以下是请求头信息

Host:localhost

Connecction:keep-alive

Accept:text/javascript,application/javascript,application/ecmascript,application/x-ecmascript;q=0.01

X-Requser-With:XMLHttpRequest

User-Agent:Mozilla/5.0(Windows NT 6.1)

Referer:http://www.baidu.com

Accept-Encoding:gzip,ddeflate,sdcn

Accept-Langauage:zh-CN,zh,q=0.8,en;q=0.6

// 空行断开请求头和请求体

以下是请求体信息

username=admin&pwd=123456

请求方法：

常见的请求方法有get和post，

get

一般用于信息获取

参数附加在url上，人人可见

参数大小有限制

post

一般用于修改服务器资源

参数打包发送，一般不可见

参数大小理论上无限制

HTTP请求之响应response：

一个http响应一般由3个部分组成：

1，状态码，告诉浏览器请求成功与否

2，响应头，和请求头一样，包含了一些环境信息，比如服务器类型，响应内容类型等

3，响应体，响应正文

以下是一个响应体示例：

状态码

HTTP/1.1 200 OK

响应头

Date:Sun,23 Now 2017 10:15:33 GMT

Server:Apache

Content-Encoding:gzip

Content-Length:8548484

Connecction:keep-alive

Content-Type:application/javascript

// 空行断开响应头和响应体

// 响应体

alert('test')

//实例化xhr对象

var xhr = newxmlHttpRequest()//载入请求open方法：请求方式，请求地址，是否异步

xhr.open(method,url,asncy)//发送：get方法时，不用发送string或发送null，post则需要写入发送的数据。

xhr.send(string)//eg.

//get:

xhr.open('GET','get.php',true)

xhr.send()//post:

xhr.open('POST','user.php',true)//post需要在请求头里指定发送数据的类型，下面是表单类型

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//send里填参数即可

xhr.send('name=hhh&pwd=123456')//监听状态变化

xhr.onreadystatechange = function() {if (xhr.readyState === 4&&xhr.status ===200){//处理响应正文responseText，多数是json数据

alert(xhr.responseText)

}

}

请求状态码：xhr.readyState

0 请求未初始化，open方法未调用

1 连接已建立，open已经调用，正在发送请求

2 请求已经接收了，即接收了请求头信息

3 解析 接收解析响应的内容

4 解析完成 浏览器可以使用返回来的数据了。

http状态码:xhr.status

1xx 信息类，表示已经收到了浏览器请求，正在处理

2xx 成功

3xx 重定向

4xx 客户端错误，比如可能发送了一个无效url

5xx 服务端错误

JSON

JSON是一个现在服务器和浏览器数据交互的常用格式，JSON数据可以简单地理解成没有方法的对象，不过其键需要用双引号包裹。JSON的本质是字符串，所以不能包含有JavaScript代码。

JSON的反序列化形式可以直接当成JavaScript对象使用，如.符号或[]访问属性

JSON的序列化形式就是一个字符串。

JSON.stringify(),JSON.parse()方法分别是用于JSON的序列化和反序列化

以下是一个JSON示例：

{"nama":"zhouxiaohouer","age":23,"data":[

{"proid":112344,"proname":"小米6"},

{"proid":112345,"proname":"小米7"}

]

}