AJAX

1.AJAX（Asynchronous JavaScript and XML）

JavaScript执行异步网络请求

Web的运作原理：一次HTTP请求对应一个页面 

AJAX使我们可以通过JavaScript直接通过JavaScript获取最新的内容（数据），而不用刷新整个页面

简单的说：AJAX就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应，实现网络编程。

2.用法

栗子：

//使用AJAX的过程可以类比平时访问网页的过程

//1.创建一个XMLHttpRequest对象 ->相当于打开了一个浏览器
var xhr = new XMLHttpRequest();
//2.打开与一个URL的连接 ->相当于在地址栏输入网址
//open(type,url/file,asyns(是否异步，默认为true)) 
xhr.open('GET','http://47.101.189.79/web_json/test.json',true);
//3.发送请求 ->相当于点击回车访问网页
xhr.send();
//4.指定状态码变化函数
xhr.onreadystatechange = function(){
    if(this.status == 200 && this.readyState == 4){
        console.log('ok');
    }
}

 

在第四步中，处了onreadystatechange方式外，还可以使用onload，区别：onload不能监听readyState状态码2和3

readyState状态码与HTTP常用状态码：

readyState状态码

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

HTTP状态码

200：服务器成功返回网页
404：请求的网页不存在
503：服务器暂时不可用

XMLHttpRequest对象：本质上XMLHttpRequest就是JavaScript在Web平台上发送HTTP请求的手段，所以我们发送的请求依然是HTTP请求。

1.GET请求与POST请求

 

区别:

 

1.get请求需注意缓存问题,post请求不需担心这个问题

 

2.post请求必须设置Content-Type值为application/x-form-www-urlencoded

 

3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

 

 

2.同步与异步

xhr.opne()的第三个参数要求传入一个布尔值，作用是设置本次的请求是否采用异步方式执行，默认问true，需要同步则传入false

如果是采用同步方式执行，代码会卡在xhr.send()这一步，所以不管是同步还是异步，一定要在send()事件之前先注册redystatechange

 

3.数据响应格式

XML：一种数据描述手段，现在基本不用，数据冗余太多

JSON：也是一种数据描述手段，服务端采用JSON格式返回数据，客户端按照JAON格式解析数据。

 3.跨域

同源策略：

是浏览器的一种安全策略，同源是指域名要相同（www.example.com和api.example.com不同);

协议要相同（http与https不同）；端口号要相同（默认是80，和8080不同）。

CORS（Cross Origin Resource Share，跨域资源共享 ）

 

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，

发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

 

CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，

就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信