手机版

Ajax语法分析

时间:2021-09-07 来源:互联网 编辑:宝哥软件园 浏览:

Ajax是目前流行的技术,也是一项值得探索和研究的技术。本文将根据Ajax的发展及其在不同库框架中的使用情况,与您分享Ajax的新旧语法。

Ajax简介

Ajax被称为“异步JavaScript和XML”,意思是“异步Javascript和XML”。通过Ajax,我们可以在不阻塞页面的情况下向服务器发送交换数据的请求,这也可以理解为异步数据传输。在Ajax的帮助下,我们的网页只需要部分刷新就可以更新数据的显示,减少了不必要的数据量,大大提升了用户体验,缩短了用户的等待时间,让web应用变得更小、更快、更友好。

当然,以上内容都是老生常谈,作为一个合格的开发者,大家都很熟悉。在这里,我们只简单介绍一下那些初学者。有关Ajax的更多信息,请访问W3School了解:http://www.w3school.com.cn/php/php_ajax_intro.asp

本机Ajax

基本上,所有现代浏览器都支持本机Ajax功能,所以让我们详细介绍如何使用本机JS启动和处理Ajax请求。

1.获取XMLHttpRequest对象

var xhr=new XMLHttpRequest();//获取浏览器内置的XMLHttpRequest对象

如果你的项目应用不考虑IE的低版本,可以直接用上面的方法。所有现代浏览器(火狐、Chrome、Safari和Opera)都内置了XMLHttpRequest对象。如果需要兼容旧版本的IE(IE5、IE6),可以使用ActiveX对象:

var xhrif(窗口。XMLHttpRequest){ xhr=new XMLHttpRequest();} else if(window . ActiveX object){//兼容旧版浏览器xhr=new ActiveX object(' Microsoft . xmlhttp ');}2.参数配置

使用XMLHttpRequest对象,我们还需要配置一些请求的参数信息来完成数据交互,这可以通过使用open方法来实现:

var xhrif(窗口。XMLHttpRequest){ xhr=new XMLHttpRequest();} else if(窗口。ActiveX object){ xhr=new ActiveX object(' Microsoft。XMLHTTP’);}if (xhr) { xhr.open('GET ','/test/',true);//以GET请求的形式向“/test/”路径发送异步请求。}open方法为我们创建一个新的http请求,其中第一个参数是请求模式,一般为‘GET’或‘post’;第二个参数是请求url;第三个参数是异步的,默认值为真。

3.发送请求

配置好基本参数信息后,我们直接调用send方法发送请求。代码如下:

var xhrif(窗口。XMLHttpRequest){ xhr=new XMLHttpRequest();} else if(窗口。ActiveX object){ xhr=new ActiveX object(' Microsoft。XMLHTTP’);}if (xhr) { xhr.open('GET ','/test/',true);xhr . send();//调用send方法发送请求}这里需要注意的是,如果使用GET方法传递参数,我们可以直接把参数放在url之后,比如'/test/?name=luozhsize=12 ';如果使用POST方法,那么我们的参数需要写入send方法,例如:

xhr.open('POST ','/test/',true);xhr . setrequestheader(' Content-type ',' application/x-www-form-URL encoded ');//将请求头设置为提交xhr.send格式(' name=luozhsize=12 ');最终将以表格数据的形式传递:

如果没有设置请求头,本地Ajax将默认使用“文本/纯文本”的内容类型。charset=UTF-8’。如果按照上述参数编写表单,我们最终的传输表单如下:

显然,这不是服务器期望的数据格式。我们可以这样写:

xhr.open('POST ','/test/',true);xhr . send(JSON . stringify({ name : ' lo zh ',size : 12 });最终传输格式如下:

这样,我们可以直接将JSON字符串传递给后台进行处理。当然,可以相应地配置背景。

4.监控状态

发送完Ajax请求后,我们需要监控服务器返回的状态并进行相应的处理。这里,我们需要使用onreadystatechange方法,代码如下:

var xhrif(窗口。XMLHttpRequest){ xhr=new XMLHttpRequest();} else if(窗口。ActiveX object){ xhr=new ActiveX object(' Microsoft。XMLHTTP’);}if (xhr) { xhr.open('GET ','/test/',true);//以GET请求的方式将异步请求xhr.send()发送到“/test/”路径;Xhr。onreadystatechange=function(){//使用onreadystatechange来监视if (xhr)的状态。readystate==4) {//readystate 4表示请求响应完成,如果(xhr.status===200) {//status 200表示请求成功console.log('成功执行')} else {console.log('执行错误');}}}}以上,我们使用onreadyStatechange监控状态,内部使用readystate获取当前状态。readyState有五个阶段,当它为4时,意味着响应内容被解析,可以在客户端调用。当readyState为4时,我们通过State获取状态码,当状态码为200时执行成功码,否则执行错误码。

当然,我们可以使用onload,而不是等于4的onreadystatechange,因为onload只在状态为4时调用,代码如下:

Xhr.onload=function () {//调用onloadif (xhr。status==200) {//status为200,表示请求成功console.log('执行成功');} else {console.log('执行错误');}}但是需要注意的是,IE对onload并不友好。除了空载,还有:

加载开始进度中止超时加载结束错误和其他事件,感兴趣的学生可以亲自练习它们的用处。

以上是本机Ajax请求数据的常见代码。

其他库框架中的Ajax

1.1.jQuery中的Ajax

JQuery作为用户数量最多的库,很好地封装了原生的Ajax代码,大大提高了兼容性和易用性,使得Ajax的调用变得非常简单。下面是一个简单的jQuery Ajax代码:

$.Ajax ({method :' get ',//1.9.0在此版本之前,使用' type' URL 3360'/test/',datatype :' JSON'})。done (function () {console.log('执行成功');}).fail(function() {console.log('执行错误'));})与原生Ajax不同,jQuery中默认的Content-type是‘application/x-www-form-URL encoded;Charset=UTF-8 ',如果想了解更多关于jQuery Ajax的信息,可以去官方文档:http://api.jquery.com/jquery.ajax/

2.Ajax在2。Vue.js

作为目前流行的前端框架,Vue.js本身并不包含Ajax功能,而是需要以插件的形式在项目中引用。它对Ajax插件的官方推荐是vue-resource,下面是vue-resource的请求代码:

Vue.http.get ('/test/')。然后((响应)={console.log('执行成功');},(响应)={console.log('执行错误');});Vue-resource支持Promise API、Firefox、Chrome、Safari、Opera和IE9等浏览器,在浏览器兼容性上与IE8不兼容。毕竟vue本身并不兼容IE8。如果你想了解更多关于vue-resource的信息,你可以去github文档:https://github.com/vuejs/vue-resource

3.Ajax在3。Angular.js

Angular.js中的Ajax主要是指Angular的1.版本,因为目前不建议在生产环境中使用Angular2。

var myApp=angular.module('myApp ',[]);var myCtrl=myapp . controller(' myCtrl ',['$scope ',' $http ',function($scope,$http){ $http({ method: 'GET ',url: '/test/',header RS : { ' Content-Type ' : ' application/x-www-form-URL encoded;Charset=utf-8'}})。成功(函数(数据){console.log('执行成功');}).错误(function () {console.log('执行错误');});}]);在Angular中,我们需要在控制器上注册一个$http的事件,然后才能在内部执行Ajax。Angular Ajax的默认内容类型是“应用程序/JSON”;Charset=UTF-8 ',所以如果你想以表单提交,你需要设置headers属性。如果你想了解更多关于Angular Ajax的知识,可以去官方文档:https://docs.angularjs.org/api/ng/service/$http(可能需要FQ)

4.Ajax在4。反应

在React中,我建议使用fetch来请求数据。当然,它不仅适用于React,还可以用于任何框架,比如Vue和Angular以上,因为它已经得到了当前主流浏览器的支持。至于它的主要功能和用途,我将在下面解释。

获取应用编程接口

提取应用编程接口是基于承诺设计的。由于Promise和Fetch API本身的浏览器兼容性问题,部分浏览器暂时不支持Fetch API。浏览器兼容性图如下:

当然,我们可以通过使用一些插件来解决兼容性问题,比如:fetch-polyfill、es6-promise、fetch-ie8等等。

使用Fetch,我们可以非常方便地编写Ajax请求。让我们将本机XMLHttpRequst对象与Fetch进行比较:

XMLHttpRequst API

//XMLHttpRequst APIvar xhr=new XMLHttpRequest();xhr.open('GET ','/test/',true);xhr . onload=function(){ console . log('执行成功');};xhr . onerror=function(){ console . log('执行错误');};xhr . send();获取应用编程接口

fetch('/test/')。然后(function(response){ return response . JSON();}).然后(函数(数据){console.log('执行成功');}).catch(函数(e) {console.log('执行错误');});可以看出,我们的代码在使用Fetch后更加简洁和语义化,链式调用的方式使其更加流畅和清晰。随着浏览器内核的不断完善,未来XMLHttpRequest将逐渐被Fetch所取代。关于Fetch的详细介绍可以移动:https://segmentfault.com/a/1190000003810652

跨域Ajax

介绍了各种Ajax应用编程接口。跨域是我们无法避免的重要问题之一。在这里,我们将关注如何处理Ajax跨域。

有四种主要方法来处理Ajax跨域问题:

HTML5提供的iframe、JSONP、proxy和XMLHttpRequest Level2的第一种和第二种使用方式大家应该都很熟悉,属于前端活动,这里就不介绍了,这里主要介绍第三种和第四种方式。

使用代理的方式可以理解为:

通过在web服务器端以相同的域名创建代理:

北京服务器(域名:www.beijing.com)

上海服务器(域名:www.shanghai.com)

比如在北京web服务器的后台(www . Beijing.com/proxy-Shanghai service . PHP),调用上海服务器(www.shanghai.com/services.php)的服务,然后将访问结果返回给前端,这样前端调用北京同域名的服务,和调用上海的服务具有相同的效果。

使用XMLHttpRequest Level2的方式需要后台相应地配置请求头:

//php语法头(' access-control-allow-origin : * ');标题('访问控制-允许-方法: GET,POST ');上面的*符号可以替换为允许访问的域名,而*表示可以访问所有域名。

可以看出,第三、第四种方法主要在后台,前端只需要调用即可。

摘要

不管Ajax的语法有多多样,不管库和框架如何封装Ajax,它都只是一个实现异步数据交互的工具。我们只需要了解Ajax在原生JS中的实现原理,了解XMLHttpRequest和promise的概念和流程,就可以在异步数据交互的时代轻松导航。

以上就是本文的全部内容。希望对大家有帮助,支持我们!

版权声明:Ajax语法分析是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。