1、什么是？
原理性。
- $.ajax({ ----jQuery中封装好的异步请求
- type:"post",
- url:"add.do",
- cache:"false",
- dataType:"json",
- success:function(msg){
- //请求成功后执行的语句。
- }
- });
没有封装的情况下的异步请求。
ajax=异步（asynchronours） 的 javaScript and xml
本质: 异步请求不是语言，创建更好，更快以及交互性更强的web应用。
实质就是javaScript技术
1、什么是异步？
Asynchronous:是不是一门语言，而是为了解决一个问题所出现的技术, 为了创建更好，更快，交互性更强的web应用。
2、异步和同步？
进程
线程同步：
多个线程公用一个资源-----临界资源。
解决出现的这种问题的技术------线程同步。
int count=1; --k8554--5--14
public void maipiao(){
if(count>0){
//允许买-----程序在处理数据的时候，
需要时间1秒。
count--;
}
}
问题：为什么需要线程同步这个技术？
线程异步：
因为线程的异步性，导致了需要线程同步技术。
两个人可以同步干一件事情，异步。
异步：两个人都有权操作同一个资源。
网页中的同步和异步：
请求：用户请求----服务器---解析请求---查----把结果集转变成字节码--响应--浏览器解析，显示。---正在呈现：正在接收响应,--- 等待呈现：白屏
3、异步出现的意义？
用户体验的角度：
同步：当响应的呈现之前，页面的状态是白色，处于半呈现状态。第一个请求在没有响应结束之前，用户点击第二个。
异步：2005年的时候，异步出名---google suggest 两个请求同步走，互不干涉。
异步时空：注册--
特点：局部刷新数据，同步异步请求，创建快速交互页面。
总结：是一个实现交互性更强的技术实现了局部刷新数据的功能。
4、代码？
XMLHttpRquest对象可以实现异步请求的发送。
主流浏览器大部分都支持该对象。
主流：IE，火狐，chrome,opera,safari。。。
IE5，6---不支持该对象。
IE5,6：ActiveXObjecct对象发送异步请求。
使用异步请求的步骤：
第一步：创建XMLHttpRequest xhr引擎对象
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest(); //判断所使用的游览器
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器使用的对象
}
第二步：构建异步请求：
url="add.do?user_id=1001&user_name=汤晓春"+Math.random(); //减少缓存
xhr.open("get/post",url,true/false);
什么情况下用get，什么情况下用post
第三步：设置服务器处理返回结果方法。
xhr.readyState（返回服务器响应用户的状态）
0：请求未初始化,
1：与服务器建立连接,
2：接收开始,
3：处理中,
4：处理完毕。
xhr.status==200/404
if(xhr.readyState==4&&xhr.status==200){
//程序返回的结果
xhr.responseText:response.getWrite().print("1");//得到String类型的返回值。
xhr.responseXML:得到xml样式的返回值。需要特殊的方式解析。
if（1）{
}else{
}
}
第四步：发送请求
xhr.send(String);String 用户post请求。
案例1:判断注册的用户名，是否已经被使用了。使用了提示使用了，红色。否则：可以用。绿色。
4、注意点
1、ajax也可以发送同步请求，实质上没有什么意义？
2、在发送前就知道怎么回来，去哪里。谁发送，谁接受。
代码案例部分(注册界面)：
< script type= "text/javascript" >
var xhr;
function checked1() {
//创建异步引擎对象；
var username=document.getElementById("username" ).value;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject( "Microsoft.XMLHTTP" );
}
//构建异步请求
var url = "vali.do?username=" + username;
xhr.open( "get", url, true);
//处理服务器返回结果方法
xhr.onreadystatechange = chuli;
//发送异步请求
xhr.send( null);
}
function chuli() {
if (xhr.status == 200 && xhr.readyState == 4) {
var v = xhr.responseText;
if (v == "0") {
document.getElementById( "msg").innerHTML = ("该用户名可用" );
document.getElementById( "msg").style.color = "green" ;
} else if (v == "1") {
document.getElementById( "msg").innerHTML = ("该用户名不可用" );
document.getElementById( "msg").style.color = "red" ;
}
}
}
</ script>
</ head>
< body>
<input type = "text" id= "username" onkeyup= "checked1()" />
<span id = "msg"></ span>< br>
<input type = "submit" value= "登录">
</ body>
</ html>
var xhr;
function checked1() {
//创建异步引擎对象；
var username=document.getElementById("username" ).value;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject( "Microsoft.XMLHTTP" );
}
//构建异步请求
var url = "vali.do?username=" + username;
xhr.open( "get", url, true);
//处理服务器返回结果方法
xhr.onreadystatechange = chuli;
//发送异步请求
xhr.send( null);
}
function chuli() {
if (xhr.status == 200 && xhr.readyState == 4) {
var v = xhr.responseText;
if (v == "0") {
document.getElementById( "msg").innerHTML = ("该用户名可用" );
document.getElementById( "msg").style.color = "green" ;
} else if (v == "1") {
document.getElementById( "msg").innerHTML = ("该用户名不可用" );
document.getElementById( "msg").style.color = "red" ;
}
}
}
</ script>
</ head>
< body>
<input type = "text" id= "username" onkeyup= "checked1()" />
<span id = "msg"></ span>< br>
<input type = "submit" value= "登录">
</ body>
</ html>