Ajax:
Asynchronous JavaScript and XML(异步的JavaScript和XML).
Asynchronous: 异步的意思
JavaScript: JavaScript脚本,在浏览器中执行
and: 和
xml: 是一种数据格式
Ajax是一种做局部刷新的新方法,不是一种语言.Ajax包含的技术主要有JavaScript,dom,css,xml等等.
核心是JavaScript和xml.
JavaScript: 负责创建异步对象,发送请求,更新页面的dom对象.Ajax请求需要服务器端的数据.
xml: 网络中的传输的数据格式.使用json替换了xml.
Ajax中使用XMLHttpRequest对象
1) 创建异步对象 var xmlHttp = new XMLHttpRequest();
2) 给异步对象绑定事件. onreadystatechange : 当异步对象发起请求,获取了数据都会触发这个事件.
这个事件需要制定一个函数,在函数中处理状态的变化.
xmlHttp.onreadystatechange = function() {
处理请求的状态变化.
};
异步对象的属性 readyState 表示异步对象请求的状态变化
0: 请求未初始化,创建异步请求对象 var xmlHttp = new XMLHttpRequest();
1: 初始异步请求对象 xmlHttp.open(请求方式,请求地址,true);
2: 异步对象发送请求 xmlHttp.send();
3: 异步对象接收应答数据 从服务器端返回数据, 此步是XMLHttpRequest异步对象内部使用,获取原始的数据.
4: 异步对象把接收的数据处理完毕,此时才可以读取数据, 此步开发人员使用,更新当前页面.
3) 初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求(默认是true,异步请求))
例如:
xmlHttp.open("get","loginServlet?name=...&pwd=123",true);
4) 使用异步对象发送请求
xmlHttp.send();
获取服务器端返回的数据,使用异步对象的属性 responseText.
使用例子: xmlHttp.responseText
function doAjax(){
// 1/创建异步对象
var xmlHttp = new XMLHttpRequest();
// 2/绑定事件
xmlHttp.onreadystatechange = function () {
// 处理服务器端返回的数据,更新当前页面
if (xmlHttp.readyState===4&&xmlHttp.status===200){
// 更新dom对象
document.getElementById("msg").innerText = xmlHttp.responseText;
}
}
// 3/初始请求数据
// 获取dom对象的value值
var name = document.getElementById("name").valueOf().value;
var weight = document.getElementById("w").valueOf().value;
var height = document.getElementById("h").valueOf().value;
//此步传输数据
// 第二个是(类名?映射名?)加上正确格式的字符串
var msg = "name="+name+"&weight="+weight+"&height="+height;
xmlHttp.open("get","bmiServletPart?"+msg,true);
// 4/发起请求
xmlHttp.send();
}