1.Ajax简介
Ajax是几个单词首字母的缩写:Asynchronous JavaScript and XML,是异步通信技术实现局部刷新效果。我们通过JS的XMLHttpRequest对象完成发送请求服务器并返回结果的任务,然后使用JS更新局部的页面。异步指的是JS脚本发送请求后并不是一直等着服务器相应,而是发送请求后继续做别的事, 请求相应和处理是异步完成的。XML一般用于请求数据和相应数据的封装,css用于美化页面样式。
2.利用XMLSHttpRequest对象构建Ajax应用
利用XMLHttpRequest(XHR)对象,每次构建Ajax应用必须遵循以下步骤:
创建XHR对象
创建Ajax请求
发送Ajax请求(Java代码,其他都是js代码)
处理服务器响应
3.利用XMLSHttpRequest对象构建Ajax应用的优势与不足
优势:
不需要插件支持
优化用户体验
提高web程序性能
减轻服务器和带宽的负担
不足:
浏览器对XHR对象的支持度不够
破坏浏览器前进后退按钮功能的正常使用
对搜索引擎的支持不足
开发和调试工具的缺乏
4.利用XMLSHttpRequest对象构建Ajax应用的具体步骤
首先写一个异步对象的方法,一会在function中调用
var xml;
function createHTTP(){
//方法一:
//针对不同的浏览器写不同的代码
if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
//针对FireFox,Moziler,Opera,Safai,IE7,IE8
xml=new XMLHttpRequest();
}
}
在写个调用方法
function checkUser(){
var userName=document.getElementById("UserName").value;
//(1)创建异步对象
createHTTP();
//(2)状态变化与事件关联
xml.onreadystatechange=statechange;
//(3)创建一个请求,并准备向服务器端发送(加载要连接的页面)
xml.open("get","CheckUserServlet?UserName="+userName,true);
//(4)发出请求
xml.send();
}
//判断当前请求的状态
function statechange(){
//判断是否是完成状态
if(xml.readyState==4){
//判断是否执行成功
if(xml.status==200){
//4.处理服务器响应
var data=xml.responseText;
//alert(data);
//消息展示容器
var span =document.getElementById("spanNameMessage");
if(data=="noexist"){
span.style.border="solid 1px green";
span.innerHTML ='恭喜,可以使用';
valid=true;
}else{
span.style.border="solid 1px red";
span.innerHTML='不可以使用';
valid=false;
}
}
else{
document.write("异步调用失败"+xml.status);
}
}
}
onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果
onreadyStateChange事件是在readyState属性发生改变时触发的,
readyState的值表示了当前请求的状态,
在事件处理程序中可以根据这个值来进行不同的处理。
readyState有五种可取值:
0:尚未初始化,
1:正在加载,
2:加载完毕,
3:正在处理;
4:处理完毕。一旦readyState属性的值变成了4,就可以从服务器返回的响应数据进行访问了。
Http状态码 含义
200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
bstrMethod
http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
bstrUrl
请求的URL地址,可以为绝对地址也可以为相对地址。
varAsync[可选]
布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数。
true和false的区别是
true:请求是异步的 说明发送请求后不必等到响应回来就可以干后边的事
false:的话是同步的 必须等到响应回来了 才能干后边的事
bstrUser[可选]
如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
bstrPassword[可选]
验证信息中的密码部分,如果用户名为空,则此值将被忽略。
//如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)
//向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
//服务器响应方式:
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
————————————————
版权声明:本文为CSDN博主「Zhanbo_Guilai」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Zhanbo_Guilai/article/details/80018356