Ajax

一、Ajax的简单介绍

Ajax的核心技术是XMLHttpRequest对象，简称为XHR。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面取得新数据

二、如何使用Ajax

1、使用构造函数法创建一个实例

var xhr=new XMLHttpRequest();

2、使用XHR对象时，调用的第一个方法是open(),它接收3个参数：要发送请求的类型（“post”,“get”等）、请求的url和表示是否异步发送请求的布尔值。

xhr.open("get","select.php",false);

调用open()方法并不会真正发送请求，而是启动一个请求准备发送
3、需要调用的第二个方法是send()。这个方法接收一个参数，当接收一个参数是表示要请求发送的数据，没有参数时表示只是请求获取数据。
4、通过为XHR对象添加事件处理程序，以获取服务器响应的数据

xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
             console.log( xhr.response)
            }
}

其中readyState属性表示请求响应过程中的当前阶段：

• 3：已接收，但接收到的是部分数据。
• 4：接收完成，已接收到全部数据，而且已经在客户端使用了。

status属性表示响应的Http状态，状态码为200为成功的标志。

response响应被返回的数据，为字符串形式

三、两种主要的请求方式

1、get是最常见的请求方式，可以将查询字符串参数追加到URL末尾，以便将信息发送给服务器。追加的查询字符串参数必须以问号开始以及后面的名-值对必须以“&”分隔开。
2、post通常用于向服务器发送应该被保存的数据，它可以传送非常多的数据，而且格式不限。应用post请求时，就要向send()方法中传递某些数据。
3、两者的区别：

• get请求参数会被完整保留在浏览器历史记录里，而post中的参数不会被保留。,也就是说post方法比较安全。
• 与get请求相比，post请求消耗的资源会更多，从性能角度来看，发送相同的数据，get请求的速度最多可以是post的两倍。

四、跨域问题

1、原因：当端口号不同、主机名称不同、协议不同时，就会产生跨越问题。XHR对象只能访问与包含它的页面位于同一个域中的资源，所以使用XHR实现Ajax通信就会有跨域安全的限制。
2、简单总结两种解决方案：

• jsonp（也称为src跨域），第一步：使用script的src属性连接，第二步：通过传递回调函数 （get传值），在后台(php)文件中配置callback(…)等
• 解决方法二：cross 跨域 请求php文件 ,第一步：在后台里面配置 header('Access-Control-Allow-Origin: * '); 其他的和正常ajax写法一样