什么是ajax？

什么是ajax？

AJAX = Asynchronous JavaScript And XML. 异步javascript 和 XML

AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面

ajax如何工作？

1. AJAX网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

ajax实现的步骤？

/1.创建 Ajax 对象
var xhr = new XMLHttpRequest();
//5.监听请求状态变化 当 Ajax 状态码发生变化时将自动触发该事件。
xhr.onreadystatechange=function(){
    /*
        0：请求未初始化(还没有调用open())
        1：请求已经建立，但是还没有发送(还没有调用send())
        2：请求已经发送
        3：请求正在处理中，通常响应中已经有部分数据可以用了
        4：响应已经完成，可以获取并使用服务器的响应了
    */
    if(xhr.readyState==4){
        console.log(xhr.responseText)
    }
}
//2.告诉 Ajax 请求地址以及请求方式
xhr.open('get', 'http://www.example.com');
//3.  发送请求
xhr.send();
//4.  获取服务器端给与客户端的响应数据
xhr.onload = function () {
     console.log(xhr.responseText);
}

ajax   post请求？

//1.创建 Ajax 对象
var xhr = new XMLHttpRequest();
//5.监听请求状态变化 当 Ajax 状态码发生变化时将自动触发该事件。
xhr.onreadystatechange=function(){
    /*
        0：请求未初始化(还没有调用open())
        1：请求已经建立，但是还没有发送(还没有调用send())
        2：请求已经发送
        3：请求正在处理中，通常响应中已经有部分数据可以用了
        4：响应已经完成，可以获取并使用服务器的响应了
    */
    if(xhr.readyState==4){
        console.log(xhr.responseText)
    }
}
//2.告诉 Ajax 请求地址以及请求方式
xhr.open('post', 'http://www.example.com');
//3.发送请求 修改请求数据格式及数据.
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("account=xxx&password=xxxx&code=");
//4.  获取服务器端给与客户端的响应数据
xhr.onload = function () {
     console.log(xhr.responseText);
}

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

使用 JSONP 解决同源限制问题？

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

1. 将不同源的服务器端请求地址写在 script 标签的 src 属性中

2. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。

使用流程

1、在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情。

2、然后需要的时候通过script标签加载对应的远程文件资源。

3、当远程文件加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当做这个函数中的参数传进去。

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

2

4