数据交互 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 = new xmlHttpRequest() ???//载入请求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" ???????????} ???????] ???}