AJAX的概念:
AJAX使用的是老的技术,新的思想.完成了RIA的应用:Rich Internet Application.
* 传统方式的开发:所有的数据提交到服务器端进行处理.(胖服务器)
* AJAX的方式开发:有一部分的代码写在客户端.
同步:
异步:
AJAX的作用:
* 用户名是否已经存在的校验
...
使用AJAX:
JavaScript和XML
* XMLHttpRequest:
* 属性:
* onreadystatechange:
* readyState:
0(未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
2(发送数据) send方法已调用,但是当前的状态及http头未知
3(数据传送中) 已接收部分数据,因为相应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误。
4(完成) 数据接收完毕,此时可以通过responseBody和reponseText获取完整的回应数据
* status:获得状态码
* responseText:响应的文本
* responseXML:响应的XML
* 方法:
* open(“请求方式”,”请求路径”,”是否异步”);
* send(“提交的参数”);
* setRequestHeader(“头信息”,”头的值”);
setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型 必须放在send方法之前.
例如:
//open xmlhttp.open("post","URL"); //设置请求头 xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); //send xmlhttp.send("username=张三");
开发步骤:
1.获得XMLHttpRequest对象.
* IE将XMLHttpRequest封装到一个ObjectXActive插件中.
* Firefox直接可以创建XMLHttpRequest.
2.设置状态改变触发一个函数.
3.打开一个链接.
4.发送请求.
【AJAX的GET入门】:
创建XMLHttpRequest function createXMLHttpRequest() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } AJAX的代码: function loadData() { // 1.创建异步XMLHttpRequest对象 var xhr = createXMLHttpRequest(); // 2.设置状态改变触发一个函数 xhr.onreadystatechange = function(){ // 回调函数. if(xhr.readyState == 4){// 请求发送完成 if(xhr.status == 200){// 响应也正确 var data = xhr.responseText; document.getElementById("d1").innerHTML=data; } } } // 3.打开一个连接: xhr.open("GET","/WEB15/ServletDemo1",true); // 4.发送请求 xhr.send(null); }
【AJAX的POST入门】:
function loadData(){ // 1.创建异步对象 var xhr = createXMLHttpRequest(); // 2.设置状态改变触发的函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ document.getElementById("d1").innerHTML=xhr.responseText; } } } // 3.打开连接 xhr.open("POST","/WEB15/ServletDemo2",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 4.发送数据 xhr.send("name=李四&password=456"); }