20180109-学习日记

XHR对象：

var request = new XMLHttpRequest();

完整的HTTP请求：

1.建立TCP连接

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

3.Web浏览器发送请求头信息

4.Web服务器应答

5.Web服务器发送应答头信息

6.Web服务器向浏览器发送数据

7.服务器关闭TCP连接

组成部分：

1.请求的方法或动作

2.请求的URL

3.请求头，包含客户端环境和身份验证信息等

4.请求体，正文

HTTP组成：

1.一个数字和文字组成的状态码

2.响应头，与请求头一样包含许多有用的信息

3.响应体，正文

Get请求：（查询）

一般用于信息获取

使用URL传递参数

对所发送信息的数量有限，一般在2000字符

Host请求：

一般用于修改服务器上的资源

对所发送信息的数量无限制

HTTP请求：HTTP响应一般由三部分组成：

1.一个数字和文字组成的状态码，用来显示请求的成败

2.响应头，响应头也和请求头一样包含许多有用的信息

如服务器类型、日期时间、内容类型和长度等

3.响应体，也就是响应正文

响应状态码：

1xx：信息类，处理中

2xx：成功接收

3xx：重定向，表示请求没有成功

4xx：客户端错误，表示客户端提交的请求有错误

5xx：服务器错误，表示服务器不能完成对请求的处理

XHR发送请求：

open(method,url,async)[请求方法（通常大写），请求地址，请求同步/异步（false，默认值：true）]

send(string)[get请求不填写或none；post请求需要填写参数]

例：request.open("GET","get.php",true);

    request.send();

响应：

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据

status和statusText：以数字和文本形式返回HTTP状态码

getAllResponseHeader()：获取所有响应报头

getResponseHeader()：查询响应中的某个字段的值

readyState属性：

0：请求未初始化，open还没有调用

1：服务器连接已建立，open已经调用了

2：请求已接收，接收到头信息了

3：请求处理中，接收到响应主体了

4：请求已完成，且响应已就绪，响应完成了

对服务器的响应进行监听：

var request = new XMLHttpRequest();

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

request.send();

request.onreadystatechange = function(){

if(request.readyState === 4 &&  request.status ===200){

request.responseText;

}

}

JSON：JavaScript对象表示法（JavaScript Object Notation）

JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成

JSON是独立于语言的，也就是说不管什么语言都可以解析json，只需要按照json的规则来就行

JSON与XML比较：

json的长度和xml格式比起来很短小

json读写的速度更快

json可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便

JSON语法规则：

JSON数据的书写格式-名称/值对

名称/值对组合中的名称在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开；例如-"name":"LYX"

JSON的值可以是以下类型：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true和false）

数组（在方括号中）

对象（在花括号中）

null

JSON解析：

eval和JSON.parse（通常使用JSON.parse，由于eval的使用可能会被恶意代码利用）

用JQuery实现Ajax：

JQuery.ajax([settings])

type:类型，"POST"/"GET"，默认为"GET"

url:发送请求地址

data:是一个对象，连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定，JQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"

success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

error:是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域

不同域之间相互请求资源，就算作"跨域"

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。简单的理解成JavaScript同源策略的限制

JSONP可用于解决主流浏览器的跨域数据访问的问题-不支持POST请求

XHR2-HTML5中提供的XMLHTTPRequest Level2已经实现了跨域访问以及其他的一些新功能-IE10以下版本都不支持

在服务器端做一些小改动：

header("Access-Control-Allow-Origin:*"); //所有域名都可以访问

header("Access-Control-Allow-Methods:POST,GET");