1.AJAX = 异步 JavaScript 及 XML(Asynchronous JavaScript and XML)
AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
AJAX 可使因特网应用程序更小、更快,更友好。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
2.老师对ajax的总结:
checkNameget.js
//声明用户名<input type="text" name="name" id="name"/>对应的dom对象
var nameDom ;
//当窗体加载完毕后 触发该匿名函数
window.onload = function(){
//根据id的名称获取<input type="text" name="name" id="name"/>对应的dom对象
nameDom= document.getElementById("name");
//注册失去焦点的事件
nameDom.onblur=checkName;
};
//验证用户名
var checkName =function() {
//1.获取xhr对象 XMLHttpRequest对象
var xhr =getXHR();
//XMLHttpRequest对象到底有什么样属性和方法
//注册回调事件:每当readyState属性值改变时,就会调用一次 该匿名函数
xhr.onreadystatechange =function(){
//readyState属性值 有:0:未初始化,1:已发送,2:未响应,3:正在接收,4:请求响应完毕
//请求响应完毕
if(xhr.readyState==4){
//成功响应
if(xhr.status==200){
//获取相应的值
var text =xhr.responseText;
//利用一个非常重要的函数,eval转换成json数据对象
var u=eval("("+text+")");
//{result:'用户名已经存在'}
//获取该json对象的result对应的值
var info=u.result;
//根据id获取msg对应的dom对象 并设置html文本内容为info信息
document.getElementById("msg").innerHTML=info;
}
}
};
//打开请求
xhr.open("GET","./demo.do?name="+nameDom.value,true);//异步处理
//发送请求
xhr.send(null);
};
//XmlHttpRequest
function getXHR() {
var xhr = null;
//根据不同的浏览器创建方式 不一样
try {
//创建这个对象
xhr = new XMLHttpRequest(); //firefox oper safari
} catch (e) {
try {
//Msxml2.XMLHTTP.3.0 Msxml2.XMLHTTP.4.0 Msxml2.XMLHTTP.5.0
xhr = new ActiveXObject("Msxml2.XMLHTTP");// Internet Explorer //6.0+
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");// Internet Explorer //5.0+
}
}
return xhr;
};
checkNamepost.js
//声明用户名<input type="text" name="name" id="name"/>对应的dom对象
var nameDom ;
//当窗体加载完毕后 触发该匿名函数
window.onload = function(){
//根据id的名称获取<input type="text" name="name" id="name"/>对应的dom对象
nameDom= document.getElementById("name");
//注册失去焦点的事件
nameDom.onblur=checkName;
};
//验证用户名
var checkName =function() {
//1.获取xhr对象 XMLHttpRequest对象
var xhr =getXHR();
//XMLHttpRequest对象到底有什么样属性和方法
//注册回调事件:每当readyState属性值改变时,就会调用一次 该匿名函数
xhr.onreadystatechange =function(){
//readyState属性值 有:0:未初始化,1:已发送,2:未响应,3:正在接收,4:请求响应完毕
//请求响应完毕
if(xhr.readyState==4){
//成功响应
if(xhr.status==200){
//获取相应的值
var text =xhr.responseText;
//利用一个非常重要的函数,eval转换成json数据对象
var u=eval("("+text+")");
//{result:'用户名已经存在'}
//获取该json对象的result对应的值
var info=u.result;
//根据id获取msg对应的dom对象 并设置html文本内容为info信息
document.getElementById("msg").innerHTML=info;
}
}
};
//打开请求
xhr.open("POST","./demo.do",true);//异步处理
//发送post请求的时候 ,必须设置这个头信息 否则 拿不到数据
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//name=chj&pass=123 jquery ajax .post {name:nameDom.value}
var data="name="+nameDom.value+""; //定义附带的数据
//发送请求
xhr.send(data);
};
//获取XmlHttpRequest
function getXHR() {
var xhr = null;
//根据不同的浏览器创建方式 不一样
try {
//创建这个对象
xhr = new XMLHttpRequest(); //firefox oper safari
} catch (e) {
try {
//Msxml2.XMLHTTP.3.0 Msxml2.XMLHTTP.4.0 Msxml2.XMLHTTP.5.0
xhr = new ActiveXObject("Msxml2.XMLHTTP");// Internet Explorer //6.0+
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");// Internet Explorer //5.0+
}
}
return xhr;
};