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

客官°小女子只卖身不卖艺 2024-04-19 09:44 73阅读 0赞

##### 说在前面： #####

###### 传统方法的缺点: ######

> 传统的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`

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

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>responseText</code></td> 
   <td>获得字符串形式的相应数据</td> 
  </tr> 
  <tr> 
   <td><code>responseXML</code></td> 
   <td>获得xml形式的相应数据</td> 
  </tr> 
  <tr> 
   <td><code>response</code></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]

##### 1. 用XMLHttpRequest实现跨域 #####

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

###### 2. 通过jsonp跨域:需要客户端与服务端配合 ######

> 思想：用其它可以跨域请求的元素，代替ajax、程序中都是`<script>`元素代替ajax发送请求

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

> eg:有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是`http://example.com/data.php`,那么a.html中的代码就可以这样：

![在这里插入图片描述][20190916194541669.png]  
![在这里插入图片描述][20190916194551650.png]  
![在这里插入图片描述][20190916194556377.png]

##### 四个方案： #####

###### 方案一: ######

1.  服务端: 将要返回的数据，填充进一条字符串格式的js语句中，组成一条正确的可执行的js语句再返回。
2.  客户端: 添加`<script src="服务器端地址">`  
    结果: script可跨域请求到服务器返回的js语句，并在客户端立刻执行。  
    问题: 服务端返回的js语句是写死的。

###### 方案二: ######

1.  服务端: 返回一条自定义函数的调用语句，要求客户端必须执行指定名称的函数
2.  客户端: 添加`<script src="服务器端地址">`并提前定义一个与服务端同名的函数，函数有一个参数可接受服务器端的数据， 函数内可执行任意操作  
    问题: 函数名是写死的，极容易发生冲突。

###### 方案三: ######

1.  服务端：接受一个函数名参数，将客户端发来的函数名参数拼接到js语句的开头（即返回执行函数名参数对应的函数的js语句）
2.  客户端：<script src=“地址?参数名=本地函数名”  
    问题: script是写死的。只能在页面加载时请求一次

###### 方案四: ######

1.  服务端：接受一个函数名参数，将客户端发来的函数名参数拼接到js语句的开头（即返回执行函数名参数对应的函数的js语句）
2.  客户端: 动态创建script元素，script只要被加到页面上，就立刻自动请求  
    问题: script不断累积  
    解决: 在回调函数中自动删除script

###### jQuery中ajax的jsonp跨域请求 ######

$.ajax({ 
           dataType:"jsonp",
         })

强调：`dataType:"jsonp"`需要服务器端配合才能实现。  
实际上，dataType:"jsonp"的原理和方案四一致:

1.  也是通过动态添加`<script>`发送请求
2.  也是通过`?callback=函数名`，发送函数名到服务端
3.  函数名其实是$.ajax自动为success函数生成的随机函数名。
4.  在jQuery中不需要重新定义回调函数，服务端会自动将success,fail视为回调函数并在成功/失败时返回调用语句。

###### 3. 通过CROS跨域请求原理 ######

> 只要服务器端允许即可。在服务器端添加响应头:

// node中:
      res.writeHead(200,{ 
         "Content-Type":"application/json;charset=utf-8",
         "Access-Control-Allow-Origin":"指定来源域名"|"*"
      })

> 参考文档：https://www.cnblogs.com/iamlhr/p/9940965.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1bc620e29d89481ca76dfc9c32782010.png
[20190916194541669.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bf64b59d304d4af6a6b37329652de916.png
[20190916194551650.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5a15384f9a2845bb8aa73b85468ef850.png
[20190916194556377.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/71c3c8ce4a394f4d837f6a9cd21e0fb8.png