正文

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

换个影子  2022-02-14  198

关键词：

前言

　如今，从事前端方面的程序猿们，如果，不懂一些前后台的数据交互方面的知识的话，估计都不太好意思说自己是程序猿。当然，如今有着许多的框架，都有相对应的前后台数据交互的方法。

而，其中，用得最多的应该苏算是JQuery的Ajax了。但是，今天，影子向大家介绍的是原生js的Ajax，及跨域请求。

一、 JQuery的Ajax

首先，先回忆下JQuery的Ajax写法：

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

二、原生JS实现Ajax

// 第一步： 获得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);

注释：

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是等待服务器响应再执行。

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

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

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

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

eval() 和JSON.parse()

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

eval() :

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

JOSN.parse() :

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

四、 Ajax的跨域请求

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

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标签中调用。因此，需要声明这样一个回调函数，作为请求成功的回调

  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文件：

结果：

虽然，影子是一名web前端工程师，但是，影子中的觉得关于数据交互这一块，对我们这一群人来说，要用的地方还是，比较多的；况且，就算是用不到，多一技傍身也是，不错的；

好了，今天，影子的分享，就到这里结束了，感谢大家的支持!!!!

Ajax 的跨域限制 - JSON

】Ajax的跨域限制-JSON【英文标题】：CrossDomainLimitationsWithAjax-JSON【发布时间】：2011-01-0217:11:47【问题描述】：使用ajax请求(ht|x)ml时，您只能将请求发送到同一个域。但是，如果您请求JSON，您可以将其发送到任何域。为什么？有人... 查看详情

跨域：跨域及解决方法(代码片段)

一、什么是跨域广义的跨域包括：资源跳转：超链接<a>跳转、重定向、表单提交资源嵌入：link、ifram、script、img，以及css样式中的background：url()、@font-face()等外链接脚本请求：js的ajax请求、js或DOM中的跨域操作狭义的跨域：... 查看详情

ajax获取json数据及实现跨域请求

最近想练习一下ajax获取json数据,首先上网找一些在线的可用来测试的接口.-----------------------------------------------------这里是接口分割线Begin----------------------------------------------------------------------------------------------- 查看详情

逆向工程使用 Ext.Ajax.request 的跨域 POST 请求

】逆向工程使用Ext.Ajax.request的跨域POST请求【英文标题】：ReverseengeeringcrossdomainPOSTrequestswhichuseExt.Ajax.request【发布时间】：2011-09-2914:20:50【问题描述】：我正在使用一个脚本，该脚本似乎使用Ext.Ajax.request（使用ExtJS3）来发送跨域... 查看详情

使用AngularJS返回xml的跨域ajax请求

】使用AngularJS返回xml的跨域ajax请求【英文标题】：CrossdomainajaxrequestthatreturnsxmlusingAngularJS【发布时间】：2013-08-1621:33:46【问题描述】：我正在尝试使用AngularJs连接到answerbaseapi。我让它使用jsonp返回xml，但出现格式错误。不幸的是... 查看详情

Internet Explorer 中的跨域 POST 请求 ajax

】InternetExplorer中的跨域POST请求ajax【英文标题】：Cross-domainPOSTrequestajaxininternetexplorer【发布时间】：2012-05-1020:50:03【问题描述】：我正在使用jQuery1.7.2并想向另一个域发出POST请求。它必须是一个POST请求。但这在InternetExplorer中不... 查看详情

Internet Explorer 中的跨域 POST 请求 ajax

为什么我的跨域ajax发了两个请求?

为什么我的跨域AJAX发了两个请求?转载自：http://todoit.me/ajax-preflight/最近在做一个VUE的项目的时候,和后端的小伙伴对接口,想方便开发,于是要求后端的小伙伴在所有的接口都加上跨域的许可(Access-Control-Allow-Origin)(后来事实证明这... 查看详情

原生js实现ajaxjsonp及dom加载完成事件

一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是XMLHttpRequest对象；ajax请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接收响应数据；下面简单封装一个函数，之后稍作解释ajax({url:"./Test... 查看详情

关于ajax请求的跨域问题以及jsonp的示例

一般情况下出于安全考虑，ajax是不能跨域请求的，只能请求本服务器的数据，即同源请求，但完事皆有可能，处于对开发的要求越来越复杂，跨域请求这种事情当然是可以解决的，下面即是转载自一位大佬的随笔链接：https://www... 查看详情

ajaxjsonp的跨域请求

1.页面ajax的请求$.ajax({　　async:false,　　url:‘http://localhost:8080/downloadVideos‘,//跨域的dns/document!searchJSONResult.action,　　type:"GET",　　dataType:‘jsonp‘,　　jsonp:‘jsoncallback‘,　　jsonpCallback:"cb",//自定查看详情

js中的跨域请求

跨域请求并不仅仅只是Ajax的跨域请求，而是对于一个页面来说，只要它请求了其他域名的资源了，那么这个过程就属于跨域请求了。比如，一个带有其他域名的src的<img>标签，以及页面中引入的其他第三方的CSS样式等。对于... 查看详情

对 AWS S3 的跨域请求 AJAX 请求有时会导致 CORS 错误

】对AWSS3的跨域请求AJAX请求有时会导致CORS错误【英文标题】：Cross-originrequestsAJAXrequeststoAWSS3sometimesresultinCORSerror【发布时间】：2019-08-0502:12:52【问题描述】：我需要从S3中检索一些可公开访问的文件。这是我的S3CORS配置：<?xmlve... 查看详情

利用iframe解决ajax的跨域问题

问题 1.form提交或a标签跳转方式提交不会引发跨域问题。2.ajax出于安全问题就有了跨域问题，因为一次请求中既访问了外部域最后返回了自己的域。3.用iframe其实就是想仿照ajax的效果，把form请求提交到iframe里就不会将当前页... 查看详情

在 iframe 内容中发出跨域 ajax 请求是不是可行？

...数据。我想使用基于iframe的跨域ajax工具，例如porthole.js来实现以查看详情

原生js实现ajax请求

...符发送到服务器，然后服务器返回一个搜索建议的列表。原生的Ajax原生的Ajax请求离不开XHR对象，即XMLHttpRequest对象。所有现代浏览器都内建有这个对象。创建整个对象：varx 查看详情

带有 jquery.ajax() 的跨域“授权”标头

】带有jquery.ajax()的跨域“授权”标头【英文标题】：cross-origin\'Authorization\'-headerwithjquery.ajax()【发布时间】：2012-03-2212:42:18【问题描述】：我正在尝试发送跨域域并添加自定义“授权”标头。请看下面的代码。错误：XMLHttpRequest... 查看详情

原生js实现ajax

...大的js插件，只需要实现ajax即可。所以我们就需要自己用原生JS实现ajaxajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是XMLHttpRequest对象；ajax请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接收响应查看详情