原生JS Ajax请求

ゝ一纸荒年。 2022-05-11 09:20 283阅读 0赞

传统方法的缺点:  
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。  
什么是ajax？  
ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
XMLHttpRequest 对象  
XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest  
abort() 停止当前请求  
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回  
getResponseHeader(“header”) 返回指定首部的串值  
open(“method”,“URL”,\[asyncFlag\],\[“userName”\],\[“password”\]) 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码  
send(content) 向服务器发送请求  
setRequestHeader(“header”, “value”) 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post’方法一定要 )  
五步使用法:  
1.创建XMLHTTPRequest对象  
2.使用open方法设置和服务器的交互信息  
3.设置发送的数据，开始和服务器端交互  
4.注册事件  
5.更新界面  
get请求:  
//步骤一:创建异步对象  
var ajax = new XMLHttpRequest();  
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端  
ajax.open(‘get’,‘getStar.php?starName=’+name);  
//步骤三:发送请求  
ajax.send();  
//步骤四:注册事件 onreadystatechange 状态改变就会调用  
ajax.onreadystatechange = function () \{  
if (ajax.readyState4 &&ajax.status200) \{  
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的  
console.log(ajax.responseText);//输入相应的内容  
\}  
\}  
post请求:  
//创建异步对象  
var xhr = new XMLHttpRequest();  
//设置请求的类型及url  
xhr.open(‘post’, ‘02.post.php’ );  
//发送请求  
xhr.send(‘name=fox&age=18’);  
xhr.onreadystatechange = function () \{  
// 这步为判断服务器是否正确响应  
if (xhr.readyState == 4 && xhr.status == 200) \{  
console.log(xhr.responseText);  
\}  
\};  
为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了  
function ajax\_method(url,data,method,success) \{  
// 异步对象  
var ajax = new XMLHttpRequest();

// get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{
    
        }
        // 设置 方法 以及 url
        ajax.open(method,url);
    
        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url); 
        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }
    
    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);
    
            // 将 数据 让 外面可以使用
            // return ajax.responseText;
    
            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;
    
            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

\}  
JS几种跨域方法和原理  
js跨域是指通过js在不同的域之间进行数据传输或通信

1.通过jsonp跨域  
在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。  
比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样：

jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。  
2.CORS请求原理  
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。  
第一种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 404  
出现这种情况的原因如下：  
本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)  
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址  
解决方案: 后端允许options请求  
第二种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 405  
这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象  
解决方案: 后端关闭对应的安全配置  
第三种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且status 200  
比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错  
解决方案: 后端增加对应的头部支持  
第四种现象:heade contains multiple values ‘*,*’  
表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:\*  
解决方案:  
建议删除代码中手动添加的\*，只用项目配置中的即可  
建议删除IIS下的配置\*，只用项目配置中的即可  
解决ajax跨域  
一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:  
CORS解决跨域问题  
CORS的原理上文中已经介绍了，这里主要介绍的是，实际项目中，后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的)，这里整理了一些常见的后端解决方案:  
PHP后台配置  
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:  
第一步:配置Php 后台允许跨域

<?php header('Access-Control-Allow-Origin: \*'); header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept'); //主要为跨域CORS配置的两大基本信息,Origin和headers 第二步:配置Apache web服务器跨域(httpd.conf中) 原始代码： AllowOverride none Require all denied 修改代码： Options FollowSymLinks AllowOverride none Order deny,allow Allow from all JAVA后台配置 JAVA后台配置只需要遵循如下步骤即可: 第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下) 第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中: com.thetransactioncompany cors-filter \[ version \] NET后台配置 .NET后台配置可以参考如下步骤: 第一步:网站配置 打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站 "Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"