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>