原生js实现ajax以及ajax的跨域请求

传统方法的缺点:

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

什么是ajax

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

XMLHttpRequest 对象

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

 get请求：

// 第一步： 获得XMLHttpRequest对象
var ajax = new XMLHttpRequest();
// 第二步： 设置状态监听函数
ajax.onreadystatechange = function(){
console.log(ajax.readyState);
console.log(ajax.status);
// 第五步：在监听函数中，判断readyState=4 && status=200表示请求成功
if(ajax.readyState==4 && ajax.status==200){
// 第六步： 使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示
console.log(ajax.responseText);
console.log(ajax.responseXML);// 返回不是XML，显示null
console.log(JSON.parse(ajax.responseText));
console.log(eval("("+ajax.responseText+")"));
    }
}
// 第三步： open一个链接
ajax.open("GET","h51701.json",false);//true异步请求，false同步
// 第四步： send一个请求。 可以发送对象和字符串，不需要传递数据发送null
ajax.send(null);

post请求：

// 第一步： 获得XMLHttpRequest对象
var ajax = new XMLHttpRequest();
// 第二步： 设置状态监听函数
ajax.onreadystatechange = function(){
console.log(ajax.readyState);
console.log(ajax.status);
// 第五步：在监听函数中，判断readyState=4 && status=200表示请求成功
if(ajax.readyState==4 && ajax.status==200){
// 第六步： 使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示
console.log(ajax.responseText);
console.log(ajax.responseXML);// 返回不是XML，显示null
console.log(JSON.parse(ajax.responseText));
console.log(eval("("+ajax.responseText+")"));
    }
}
// 第三步： open一个链接
ajax.open("POST","h51701.json",false);//true异步请求，false同步

//post请求一定要添加请求头才行不然会报错，就这里跟get的不一样

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 第四步： send一个请求。 可以发送对象和字符串，不需要传递数据发送null
ajax.send(null);

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。默认true（异步）

2. send() 方法可将请求送往服务器。

• 如果浏览器请求的类型是get类型时，通过send（）方法发送请求数据，服务器接收不到
• 如果浏览器请求的类型是post类型时，通过send（）发送请求数据，服务器可以接收

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：表示ajax请求的当前状态，它的值用数字代表。

• 0  代表未初始化，还没有调用open方法
• 1  代表正在加载，open方法已被调用，但send方法还没有被调用
• 2  代表已加载完毕，send已被调用，请求已经开始
• 3  代表交互中，服务器正在发送响应
• 4  代表完成，响应发送完毕

常用状态码及其含义：

• 404 没有找到页面（not found）
• 403 禁止访问（forbidden）
• 500 内部服务器出错（internal service error）
• 200 一切正常（ok）
• 304 没有被修改（not modified）（服务器返回304状态，表示源文件没有被修改）

5. responseText：获得字符串形式的响应数据。

另外，给大家介绍两种解析字符串的方法：

eval() :

　　  eval函数用于将字符串中的JS代码解析出来并执行！！     
   　  当使用eval函数解析JSON字符串时，需 要在函数内部将JSON字符串用()拼接
   　　   例如：  eval("("+json1+")")
  　　　　  表示eval函数中的字符串不是用于执行，而是要进行字符串解析
  　　   即：
   　　　　 eval("("+json1+")") = JSON.parse(json1)；

JOSN.parse() :

　　纯粹的将JSON字符串解析为数组或对象

================================AJAX的跨域请求==================================

这里有：https://blog.youkuaiyun.com/qq_41720311/article/details/83864997

首先，我们得知道 为什么会有跨域请求这回事，以及什么情况下会有跨域请求？

1 同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

它的定义是：

　　一段脚本向后台请求数据，只能读取属于同一协议名、同一主机名、同一端口号下的数据；

　　所以，请求不同协议名、不同端口号、不同主机名下面的文件时，
       将会违背同源策略，无法请求成功，需要进行跨越处理!!

2解决跨域请求的方法

 

方法一：后台PHP进行设置

 

前台无需任何设置，在后台被请求的PHP文件中，写入一条header。

   header("Access-Control-Allow-Origin:*");

   --- 表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

JS代码：

 

　　　　　　　　　　

注释：

　　其中，url为PHP文件的路径;

PHP代码：

　　　　　　　　　　

结果：

　　

 

方法二 ：使用SRC属性 + jsonp实现跨域

实现步骤：　　　

　　　　1、原有src属性的标签子带跨域功能；所以可以使用script标签的src属性请求后台数据

 　　　　　　 <script src="http://127.0.0.1/json.php">< /script>

  　　　 2、用于src在加载数据成功后，会直接将加载的内容放到script标签中；

　　　　　　   所以，后台直接返回JSON字符串将不能在script标签中解析。

  　　　　　　 因此，后台应该返回给前台一个回调函数名，并将JSON字符串作为参数传入。

  　　　　　　　　后台PHP文件中返回： echo "callback({$json})";

  　　   3、前台接收到返回的回调函数，将直接在script标签中调用。因此，需要声明这样一个回调函数，作为请求成功的回调

1 2 3 4 5 6 7

function callback(data){   alert("请求成功!!");   console.log(data);   }

 

JS代码：

　　　　　　　　　　　　

　　　　　　　　　　　　

 

 

PHP文件：

　　　　　　　　　　　　

结果：

　　　　　　　　　　　　

 

 

方法三 ：JQuery的Ajax实现jsonp

 

　　1、在ajax请求时，设置dataType为"jsonp"；

       2、后台返回时，依然需要返回回调函数名，但是，ajax在发送请求时，会默认使用get请求将回调函数名发给后台，

  　　　　 后台$_GET['callback'] 取出函数名：

   　　　　　　---   echo "{$_GET['callback']}({$str})";

       3、后台返回以后，前台就可以使用ajax的success函数作为成功的回调

 　　　　　　  ---    success : function(data){}

 

 js代码：

　　　　　　　　

 

PHP文件：　　　　　　　　　

 

　　　　　　　　　　

结果：

　　

当然，后台也可以随便返回一个函数名，前台只要请求成功，就会自动调用这个函数。类似第二条的②、③步，而不需要本方法的第③步

 PHP返回： echo "callback({$str})";

  JS代码：  function callback(data){

　　　　　　　　console.log(data);

　　　　　　}

js代码：

　　　　　　　　

 

PHP文件：

　　　　　　　　　　

结果：

　　　　　　　　

 

参考：https://www.cnblogs.com/2502778498spw/p/7784390.html

https://www.cnblogs.com/huangyichun/p/6142477.html

https://www.cnblogs.com/cythia/p/6978323.html