**
Ajax简介
**
ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是 异步 的意思，它有别于传统web开发中采用的同步的方式。
关于同步和异步
异步传输是面向字符的传输，它的单位是字符；
而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。
同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。
Ajax的基本原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
首先，需要先了解XMLHttpRequest这个对象的属性和方法：
AJAX运行步骤
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 – (未初始化)还没有调用send()方法
1 – (载入)已调用send()方法，正在发送请求
2 – (载入完成)send()方法执行完成，
3 – (交互)正在解析响应内容
4 – (完成)响应内容解析完成，可以在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。
使用ajax的基本步骤：
1、创建ajax引擎对象
2、声明监听函数
//判断ajax状态码
//判断响应状态码
//获取响应信息(普通字符串和json格式的字符串)
//处理响应
3、创建并发送ajax请求
创建请求(设置请求方式，设置请求地址，设置异步或者同步)
发送请求
4、其他处理
创建并发送ajax请求
1、创建ajax请求(设置异步或者同步)
ajax.open(method,url,ansyc);
method:表示请求方式
get方式:请求数据以?隔开的形式拼接在url的后面。请求数据不能写在send方法中
post方式:post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
设置请求数据为键值对数据。如果有请求数据则ajax.send(“键值对数据&键值对数据…”),如果没有请求数据则ajax.send(null)
url:请求地址
ansyc:设置异步或者同步请求，true表示异步，false，表示同步。默认是异步的。
异步：当前js函数继续执行，无须等待ajax请求的响应以及响应的处理。
同步：当前js函数会等待ajax请求以及响应，当ajax响应处理完毕后，继续执行函数的剩余代码。
2、发送ajax请求
get请求方式
//创建请求
ajax.open("get","my?uname=张三&pwd=123",false);
//发送请求
ajax.send(null); */
post方式
//创建请求
ajax.open("post","my",false);
//设置请求参数为键值对方式
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencode;
//发送请求
ajax.send("uname=张三&pwd=123");
json的概念
json就是js创建对象的一种格式。保证对象中数据的紧密性 和完整性。
json的格式：
var 对象名={
键名:值,
键名:值,
…
键名:值}
使用:在服务器端将要响应的数据拼接成json格式的字符串，这样客户端(浏览器端)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象，便于数据的操作。我们可以在服务器端使用类似Gson（Gjson.jar）的工具包完成json格式字符串的拼接。
//jsp接收：
var data=ajax.responseText;
eval(“var obj=”+data);
//servlet发送
创建对象 User u=new User(18, “王五”,18, “看电影”);
json格式的字符串 String str=new Gson().toJson(u);
测试代码：
<script type="text/javascript">
//声明单击事件--非ajax
function test(){
window.location.href="my";
}
//声明单击事件--ajax
function testAjax(){
//创建Ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//声明事件监听
ajax.onreadystatechange=function(){
//判断ajax的状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
//处理响应
//获取响应内容
var data=ajax.responseText;
//使用eval方法将字符串数据转换为js对象
eval("var obj="+data);//eval("var obj=
{uid:18,uname:'王五',age:18,fav:'看电影'}")
//获取div对象
var div=document.getElementById("showdiv");
div.innerHTML=obj.fav;
}else if(ajax.status==404){
//获取div对象
var div=document.getElementById("showdiv");
div.innerHTML="请求资源不存在";
}else if(ajax.status==500){
//获取div对象
var div=document.getElementById("showdiv");
div.innerHTML="内部服务器繁忙";
}else{
//获取div对象
var div=document.getElementById("showdiv");
div.innerHTML="未知异常";
}
}
}
//发送请求
//get请求方式
/* //创建请求
ajax.open("get","my?uname=张三&pwd=123",false);
//发送请求
ajax.send(null); */
//post请求方式
//创建请求
ajax.open("post","my",false);
//设置请求参数为键值对方式
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//发送请求
ajax.send("uname=张三&pwd=123");
//异步同步
var div=document.getElementById("showdiv");
alert(div.innerHTML);
}
//使用js方式添加监听事件及其监听的函数
function testD(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("aaaa");
}
}
//js中的josn对象
//创建js对象
var obj={};
//声明对象内容
obj.name="张三";
obj.pwd="123";
//使用json方式创建对象
var obj2={
name:"李四",
pwd:"123"
};
var str="{name:'李四',pwd:'123'}";
alert(obj.name+":"+obj2.name);
</script>
</head>
<body onload="testD()">
<h3>ajax学习</h3>
<hr />
<input type="button" value="测试非ajax" onclick="test()"/>
<input type="button" value="测试ajax" onclick="testAjax()"/>
<input type="button" id="btn" value="测试js添加事件"/>
<div id="showdiv" style="width: 200px;height: 200px;border: solid 1px;"></div>
</body>
</html>
ajax用户名校验
<script type="text/javascript" src="js/AjaxUtil.js"></script>
<script type="text/javascript">
//声明用户名校验函数
function checkUname(){
var uname=document.getElementById("uname").value;
myAjax("get", "data","uname="+uname,function(data){
if(eval(data)){
//获取Span对象
var span=document.getElementById("unameSpan");
//设置span颜色
span.style.color="red";
//将数据填充到span中
span.innerHTML="用户名已被注册";
}else{
//获取Span对象
var span=document.getElementById("unameSpan");
//设置span颜色
span.style.color="green";
//将数据填充到span中
span.innerHTML="用户名ok";
}
})
/* //获取用户名信息
var uname=document.getElementById("uname").value;
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//声明监听函数
ajax.onreadystatechange=function(){
//判断ajax状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
//获取响应数据（普通字符串或者json格式的字符串）
var data=ajax.responseText;
//处理响应数据
if(eval(data)){
//获取Span对象
var span=document.getElementById("unameSpan");
//设置span颜色
span.style.color="red";
//将数据填充到span中
span.innerHTML="用户名已被注册";
}else{
//获取Span对象
var span=document.getElementById("unameSpan");
//设置span颜色
span.style.color="green";
//将数据填充到span中
span.innerHTML="用户名ok";
}
}
}
}
//创建并发送请求
//创建请求
ajax.open("get","data?uname="+uname);
//发送请求
ajax.send(null); */
}
</script>
</head>
<body>
用户名 : <input type="text" name="uname" id="uname"
value="" onblur="checkUname()"/><span id="unameSpan"></span>
</body>
</html>
ajax封装
实现:相同的保留，不同的传参。
请求方式：method
请求地址：url
请求参数：data 请求参数的格式为键值对格式的字符串，不同的键值对使用&符号隔开.如果没有请求数据传入null示例：“a=1&b=2”
异步同步设置:ansyc
响应处理参数:deal200
该参数接收一个js的函数对象，函数对象中声明ajax响应数据的处理逻辑代码。
注意：函数对象需要声明一个形参用来接收要处理的响应数据
/声明ajax函数 function myAjax(method,url,data,deal200,ansyc){
//创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//声明监听函数
ajax.onreadystatechange=function(){
//判断ajax状态码
if(ajax.readyState==4){ alert("aaa")
//判断响应状态码
if(ajax.status==200){
//获取响应数据
var data=ajax.responseText; if(deal200){ deal200(data); } } } }
//创建并发送请求
if("get"==method.toLowerCase()){
//创建请求
ajax.open("get",url+(data==null?"":"?"+data),ansyc);
//发送请求
ajax.send(null);
}else if("post"==method.toLowerCase()){
//创建请求
ajax.open("post",url,ansyc);
//设置请求数据为键值对数据
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求
ajax.send(data); } }
`
调用：
<script type="text/javascript" src="js/AjaxUtil.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
//使用ajax进行处理--演示调用
myAjax("get","data","uname=张三",function(a){
alert(a);
})
jQuery中的ajax学习:
jquery是js的一个轻量型框架，已经将js创建的操作进行了封装，而ajax也是js的
一部分，所以jQuery也已经将ajax进行了封装。
封装：
$.get(url,data,fn)
url:请求地址
data:请求参数，参数格式为json对象
fn:回调函数，注意函数要声明一个形参，用来接收响应数据。
$.post(url,data,fn)
url:请求地址
data:请求参数，参数格式为json对象
fn:回调函数，注意函数要声明一个形参，用来接收响应数据。
$.ajax({json格式参数}):参数说明参照api
jQury中&.ajax()方法参数详解
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设 置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等 待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同 值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个
“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义
HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认
为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。
dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。
提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的
dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。
服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分，例如
{jsonp:‘onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器。
username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM 树信息或者其他不希望转换的信息，请设置为false。
scriptCharset：要求为String类型的参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
测试代码：
jQuery中的ajax学习
用户名: ajax的优点 1、不需要插件支持
只要用户允许javaScript在浏览器上执行，那么ajax就可以不用任何插件直接被主流的绝大数浏览器支持，这样作为一名开发人员，你就可以放心使用该技术，来完成和服务器的数据交互。
2、优秀的用户体验
比如你打开了一个网页，网页中的数据对应着一个按钮可以更新数据，那么你点击这个按钮就可以执行刷新数据，而不是将整个页面重新刷新得到你想要的数据。因为web程序回应的内容相比之下就减少了，便可以更为迅速的为你的操作做出响应。
3、提高web程序的性能
传统的客户与服务进行的数据交互是：客户通过form表单提交数据，而数据获取更是通过全页面的刷新获取整页的内容。而ajax和传统模式相比最大的不同就是传输数据的方式，ajax模式只需要通过XMLHttpRequest这个对象提交用户想要提交的内容，即做到了根据用户的需要发送制定的数据。
4、减轻服务器和带宽的负担
如果你理解ajax的原理，这点你就会很有深刻的理解(本人也是小白，为了更好的学习自己做的笔记)。ajax的作用相当于在用户和服务器之间建立一个中间层，使用户的操作和服务器响应达到异步化。ajax在客户端创建Ajax引擎，把之前传统模式下一些在服务器端的工作搬到客户端进行，便于客户端进行资源处理，同时减轻了服务器端和带宽的负担。
ajax的缺点
1、浏览器对XMLHttpRequest对象的支持度不足
ajax技术是时代技术发展的产物，之前的浏览器并没有对其进行支持。IE浏览器第一版支持XMLHttpRequest也是在5.0以后，其他的浏览器支持XMLHttpRequest对象更是在其后。为了使ajax可以在众多不同版本浏览器得到支持，开发人员不得不花费大量的时间精力编码兼顾各个浏览器之间的差异，这使得ajax的开发难度比普通的web开发难度高出很多，这也造成很多程序员对其望而生畏。
2、破坏浏览器前进、后退按钮的功能
在传统的网页中，用户习惯使用浏览器自带的”前进”和”后退”按钮，然而ajax却改变了web浏览的习惯。如何改变的呢？举个例子，一个用户在浏览某一个网页，点击了一个按钮触发了ajax请求交互后，突然感觉又想回到点击ajax请求之前的页面状态，如果该客户点击了浏览器自带的”后退”按钮，此时却发生了浏览器回到了先前的一个页面，通过ajax请求的交互的数据全都完全消失了。虽然通过一些方法(添加锚点)可以解决这个问题，但是在实现过程中比传统模式麻烦很多，造成喝多开发人员宁愿放弃该功能，也不会解决该问题。目前很多浏览器前进和后退按钮仍然是网页的前进和后退。
3、对搜索引擎支持不足
通常搜索引擎都是通过爬虫的方式对网络上数据亿计的数据进行搜索和整理的，但是目前爬虫程序还不理解那些奇怪的javaScript有时造成页面混乱。如果一个站点是通过ajax技术，那么在推广时会相比传统模式会处于劣势。
4、开发和调试工具缺乏
ajax技术中的重要组成部分是javaScript，但是目前却是缺少javaScript良好的调试工具。很多web开发人员对javaScript望而生畏。
今天的文章Ajax异步技术分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/32032.html
