史上最全ajax全套讲解

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了史上最全ajax全套讲解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

博客好久没有更新文章，主要最近在做一个聊天的功能，虽然不是很尽人意，但是最起码实现了功能。其中里面用到最多的就是数据交互问题了。所以ajax自然是最好的选择了。

话说我从没有有系统的学习Ajax过，每次都是用什么查什么，都不往我这脑子里面存储。今天总算不是很忙了，在逛博客园的时候看到一篇文章写得还是很不错的。对于Ajax的讲解还是很到位的。分享给大家一起学习一下。

ajax简介

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言，而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

ajax

Ajax包括：

  • XHTML和CSS

  • 使用文档对象模型(Document Object Model)作动态显示和交互

  • 使用XML和XSLT做数据交互和操作

  • 使用XMLHttpRequest进行异步数据接收

  • 利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

ajax伪造

iframe就是我们常用的iframe标签：

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title>伪造AJAX</title>
</head>
<body>
<div>
<p>请输入要加载的地址：<spanid="currentTime"></span></p>
<p>
<inputid="url"type="text"/>
<inputtype="button"value="提交"onclick="LoadPage();">
</p>
</div>
<div>
<h3>加载页面位置：</h3>
<iframeid="iframePosition"style="width:100%;height:500px;"></iframe>
</div>
<scripttype="text/javascript">
window.onload=function(){
varmyDate=newDate();
document.getElementById('currentTime').innerText=myDate.getTime();

};
functionLoadPage(){
vartargetUrl=document.getElementById('url').value;
document.getElementById("iframePosition").src=targetUrl;
}
</script>
</body>
</html>

一、XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

XHR的主要方法有：

1.voidopen(Stringmethod,Stringurl,Boolenasync)
用于创建请求
参数：
method：请求方式（字符串类型），如：POST、GET、DELETE...
url：要请求的地址（字符串类型）
async：是否异步（布尔类型）

2.voidsend(Stringbody)
用于发送请求
参数：
body：要发送的数据（字符串类型）
3.voidsetRequestHeader(Stringheader,Stringvalue)
用于设置请求头
参数：
header：请求头的key（字符串类型）
vlaue：请求头的value（字符串类型）

4.StringgetAllResponseHeaders()
获取所有响应头
返回值：
响应头数据（字符串类型）

5.StringgetResponseHeader(Stringheader)
获取响应头中指定header的值
参数：
header：响应头的key（字符串类型）
返回值：
响应头中指定的header对应的值

6.voidabort()
终止请求

XHR的主要属性有：

1.Number readyState状态值（整数），可以确定请求/响应过程的当前活动阶段

  • 0：未初始化。未调用open()方法

  • 1：启动。已经调用open()方法，未调用send()方法

  • 2：发送。已经调用send()方法，未接收到响应

  • 3：接收。已经接收到部分数据

  • 4：完成。已经接收到全部数据，可以在客户端使用

2.Function onreadystatechange当readyState的值改变时自动触发执行其对应的函数（回调函数）

3.String responseText作为响应主体被返回的文本（字符串类型）

4.XmlDocument responseXML服务器返回的数据（Xml对象）

5.Number states状态码（整数），如：200、404…

6.String statesText状态文本（字符串），如：OK、NotFound…

二、get请求

GET用于向服务器查询某些信息：

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title></title>
</head>
<body>

<h1>XMLHttpRequest-Ajax请求</h1>
<inputtype="button"onclick="XmlGetRequest();"value="Get发送请求"/>

<scriptsrc="/statics/jquery-1.12.4.js"></script>
<scripttype="text/javascript">

functionGetXHR(){
varxhr=null;
if(XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
returnxhr;
}
functionXmlGetRequest(){
varxhr=GetXHR();
//定义回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//已经接收到全部响应数据，执行以下操作
vardata=xhr.responseText;
console.log(data);
}
};
//指定连接方式和地址----文件方式
xhr.open('get',"/test/",true);
//发送请求
xhr.send();
}
</script>
</body>
</html>

三、post请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title>POST</title>
</head>
<body>

<h1>XMLHttpRequest-Ajax请求</h1>
<inputtype="button"onclick="XmlPostRequest();"value="Post发送请求"/>

<scriptsrc="/statics/jquery-1.12.4.js"></script>
<scripttype="text/javascript">

functionGetXHR(){
varxhr=null;
if(XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
returnxhr;
}
functionXmlPostRequest(){
varxhr=GetXHR();
//定义回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//已经接收到全部响应数据，执行以下操作
vardata=xhr.responseText;
console.log(data);
}
};
//指定连接方式和地址----文件方式
xhr.open('POST',true);
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset-UTF-8');
//发送请求
xhr.send('n1=1;n2=2;');
}
</script>
</body>
</html>

jquery ajax

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON � 同时您能够把这些外部数据直接载入网页的被选元素中。

  • jQuery 不是生产者，而是大自然搬运工。

  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

注：2.+版本不再支持IE9以下的浏览器

1.jQuery.get(...)
所有参数：
url:待载入页面的URL地址
data:待发送Key/value参数。
success:载入成功时回调函数。
dataType:返回内容格式，xml,json,script,text,html

2.jQuery.post(...)
所有参数：
url:待载入页面的URL地址
data:待发送Key/value参数
success:载入成功时回调函数
dataType:返回内容格式，xml,html

3.jQuery.getJSON(...)
所有参数：
url:待载入页面的URL地址
data:待发送Key/value参数。
success:载入成功时回调函数。

4.jQuery.getScript(...)
所有参数：
url:待载入页面的URL地址
data:待发送Key/value参数。
success:载入成功时回调函数。

5.jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认:"application/x-www-form-urlencoded;charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml":将服务器端返回的内容转换成xml格式
"text":将服务器端返回的内容转换成普通文本格式
"html":将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script":尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json":将服务器端返回的内容转换成相应的JavaScript对象
"jsonp":JSONP格式使用JSONP形式调用函数时，如"myurl?callback=?"jQuery将自动替换?为正确的函数名，以执行回调函数

写一个最简单的例子：

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title></title>
</head>
<body>
<p>
<inputtype="button"onclick="XmlSendRequest();"value='Ajax请求'/>
</p>
<scripttype="text/javascript"src="jquery-1.12.4.js"></script>
<script>
functionJXmlSendRequest(){
$.ajax({
url:"http://c2.com:8000/test/",//访问URL地址
type:'GET',//get方式提交
dataType:'text',　　　　　　　　　　//数据类型
success:function(data,statusText,xmlHttpRequest){//成功后返回的结果
console.log(data);
}
})
}
</script>
</body>
</html>

跨域ajax

由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

浏览器同源策略并不是对所有的请求均制约：

  • 制约：XmlHttpRequest

  • 不制约：img、iframe、script等具有src属性的标签

注：自己模拟跨域，需要现在自己电脑的host文件里面添加两条域名，我这里添加的是zhangyanlin.com和aylin.com这两个域名

一、JSONP实现跨域请求

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。jsonp只能通过get方式进行跨域请求

<!DOCTYPEhtml>
<htmllang="en">
<head>
<Metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<inputtype="button"value="Ajax"onclick="DoAjax();"/>
<inputtype="button"value="JsonpAjax"onclick="JsonpAjax();"/>

<scriptsrc="/statics/jquery-1.12.4.js"></script>
<scriptsrc="http://aylin.com:8002/statics/jquery.cookie.js"></script>
<script>
functionfunc(arg){
console.log(arg);//输出结果就是python代码给传过来的列表[11,22,33,]
}
functionDoAjax(){
$.ajax({
url:'http://alex.com:8002/index',type:'POST',data:{'k1':'v1'},success:function(arg){
console.log(arg);
}
});
}
functionJsonpAjax(){
//vartag=document.createElement('script');
//tag.src="http://alex.com:8002/index";
//document.head.appendChild(tag);
//document.head.removeChild(tag);
$.ajax({
url:"http://aylin.com:8002/index",dataType:'jsonp',jsonpCallBack:'func'//对端给返回函数名，函数接收的参数是内容
})
}
</script>
</body>
</html>

aylin.com域名这边可以给定义函数

#采用pythontornado框架来进行的
classIndexHandler(tornado.web.RequestHandler):
defget(self):
self.write('func([11,33]);')
defpost(self,*args,**kwargs):
self.write('t2.post')

在这里jsonp就采用script标签的src来进行跨域请求的

二、CORS

上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输，那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候，对方已经收到，但是在返回的时候被浏览器给阻挡，我们可以写一串类似于身份证的字符串，通过浏览器的预检，从而达到数据的传输。

这方面分为简单请求和非简单请求

条件：
1、请求方式：HEAD、GET、POST
2、请求头信息：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain

注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

简单请求只一次请求，而复杂请求是两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

基于cors实现AJAX请求:

1、支持跨域，简单请求

服务器设置响应头：Access-Control-Allow-Origin = ‘域名’ 或 ‘*’

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title></title>
</head>
<body>

<p>
<inputtype="submit"onclick="XmlSendRequest();"/>
</p>

<p>
<inputtype="submit"onclick="JqSendRequest();"/>
</p>

<scripttype="text/javascript"src="jquery-1.12.4.js"></script>
<script>
functionXmlSendRequest(){
varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
varresult=xhr.responseText;
console.log(result);
}
};
xhr.open('GET',"http://c2.com:8000/test/",true);
xhr.send();
}

functionJqSendRequest(){
$.ajax({
url:"http://c2.com:8000/test/",type:'GET',dataType:'text',success:function(data,xmlHttpRequest){
console.log(data);
}
})
}


</script>
</body>
</html>
classMainHandler(tornado.web.RequestHandler):
defget(self):
self.set_header('Access-Control-Allow-Origin',"http://www.xxx.com")
self.write('{"status":true,"data":"seven"}')

2、支持跨域，复杂请求

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

  • “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method

  • “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

  • “预检”缓存时间，服务器设置响应头：Access-Control-Max-Age

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title></title>
</head>
<body>

<p>
<inputtype="submit"onclick="XmlSendRequest();"/>
</p>

<p>
<inputtype="submit"onclick="JqSendRequest();"/>
</p>

<scripttype="text/javascript"src="jquery-1.12.4.js"></script>
<script>
functionXmlSendRequest(){
varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
varresult=xhr.responseText;
console.log(result);
}
};
xhr.open('PUT',"http://aylin.com:8000/test/",true);
xhr.setRequestHeader('k1','v1');
xhr.send();
}

functionJqSendRequest(){
$.ajax({
url:"http://aylin.com:8000/test/",type:'PUT',headers:{'k1':'v1'},xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>
classMainHandler(tornado.web.RequestHandler):

defput(self):
self.set_header('Access-Control-Allow-Origin',"data":"seven"}')

defoptions(self,**kwargs):
self.set_header('Access-Control-Allow-Origin',"http://www.xxx.com")
self.set_header('Access-Control-Allow-Headers',"k1,k2")
self.set_header('Access-Control-Allow-Methods',"PUT,DELETE")
self.set_header('Access-Control-Max-Age',10)

3、跨域传输cookie

在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送：

  • 浏览器端：XMLHttpRequest的withCredentials为true

  • 服务器端：Access-Control-Allow-Credentials为true

  • 注意：服务器端响应的Access-Control-Allow-Origin 不能是通配符 *

<!DOCTYPEhtml>
<html>
<headlang="en">
<Metacharset="UTF-8">
<title></title>
</head>
<body>

<p>
<inputtype="submit"onclick="XmlSendRequest();"/>
</p>

<p>
<inputtype="submit"onclick="JqSendRequest();"/>
</p>

<scripttype="text/javascript"src="jquery-1.12.4.js"></script>
<script>
functionXmlSendRequest(){
varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
varresult=xhr.responseText;
console.log(result);
}
};

xhr.withCredentials=true;

xhr.open('PUT',xhrFields:{withCredentials:true},"http://www.xxx.com")
self.set_header('Access-Control-Allow-Credentials',"true")

self.set_header('xxoo',"seven")
self.set_header('zhangyanlinhenshuai',"feichangshuai")
self.set_header('Access-Control-Expose-Headers',"shuai,shuaishuai")

self.set_cookie('kkkkk','vvvvv');

self.write('{"status":true,10)

注：本文来自《小月博客》我的另一个站点。更多资源请点击小月博客！祝大家学习愉快！

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作