原生AJAX请求以及AJAX跨域问题

说在前面：

传统方法的缺点:

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax？

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

一、原生AJAX

AJAX：“Asynchronous Javascript And XML”(异步Javascript和XML)，是指一种创建交互式应用的网页开发技术。

注意：

① AJAX不是新的编程语言，而是一种使用现有标准的新方法

② AJAX最大的有点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

③ AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

1. XMLHttpRequest对象：用于在后台与服务器交换数据。意味着可以在不重新加载整个网页的情况下，对网页某部分进行更新。目前所有浏览器都支持XMLHttpRequest

五步使用XMLHttpRequest：

① 创建XMLHttpRequest对象：var obj = new XMLHttpRequest()

② 使用open方法设置请求方式和地址以及相关交互信息：obj.open(method,url,asyncFlag,user,name，callback)。其中method有post/get两种方法，asyncFlag为是否异步（默认为true，即默认为异步，若写false,浏览器不会报错，会报警告）。user和name有时用来确认身份。callback可用来接收服务器返回的内容

③ 设置发送的数据，开始和服务器端交互：obj.send(data)。若为get方法，则数据在url后面，每个参数用&连接，且数据和地址之间用?连接。若为post方法，数据作为send方法的参数。

④ 注册事件：onreadystatechange

属性	描述
`onreadystatuschange`	存储函数（或函数名），每当`readyState`属性改变时，就会调用该函数
`readyState`	存储`XMLHttpRequest`的状态（0-4。0：请求未初始化。1：服务器连接已建立。2：请求已接收 3：请求处理中。4：请求已完成，且相应已就绪
`status`	200：“ok”。404：未找到页面

⑤ 服务器响应：obj.responseText/obj.responseXML

属性	描述
`responseText`	获得字符串形式的相应数据
`responseXML`	获得xml形式的相应数据
`response`

二、js几种跨域方法和原理

js跨域是指通过js在不同的域之间进行数据传输或通信
浏览器（注意：主体是浏览器）出于安全方面的考虑，只允许与本域（同协议、同域名、同端口）下的数据接口进行交互，不同源的客户端脚本在没有授权的情况下，是不能读写对方资源的。

在这里插入图片描述

1. 用XMLHttpRequest实现跨域

在服务器发送回应时，需要添加一个头文件：response.setHeader("Access-Control-Allow-Origin","http://js.host");。这个文件头的第一个参数是允许跨域，第二个参数是接受跨域的服务，上述文件头说明了服务器信任来自http://js.host的请求。

2. 通过jsonp跨域

在页面上引入不同域的js脚本文件是可以的。jsonp正是利用这个特性来实现的。
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的回调函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
在使用jsonp跨域时必须要在发送请求前定义回调函数，否则找不到回调函数