- AJAX —->
- 浏览器发出JavaScript请求,通过ajax引擎转为HttpRequest,发给服务器请求数据库,
- 服务器返回文本信息给ajax引擎,解析为html和css等传给浏览器
- 特点: 页面无刷新,异步,服务器返回需要的数据,
- 同步: 按照时间顺序,线性,用户发出请求,经过t秒,服务器返回信息,用户在发出请求,经过s秒,服务器返回信息,在这个过程中需要等待,如果时间比较长,用户体验不好
- 异步: 体验不会中断
- 和传统区别?
不同点 | 常规操作 | AJA操作 |
---|---|---|
是否刷新 | 刷新 | 不刷新页面 |
用户操作 | 中断,等待新页面下载后继续 | 不中断 |
性能 | 服务器返回整个新页面(包括HTML,CSS,相关图片) | 服务器仅返回需要的数据 |
编码复杂度 | 较简单 | 较复杂 |
同步 | 异步 |
3. ajax引擎?(eg:送快递,快递员相当于引擎,)
应该做什么? | 不该做什么? |
---|---|
能够被JavaScript调用, | 引擎不会处理用户的请求, |
需要指定请求地址,请求方式,参数, | 不会处理业务逻辑 |
可以从“引擎”中得到服务器返回的数据 | 只是将请求转发给服务器 |
可以异步请求服务器并接受返回的数据,javascript本身并不能访问网络,有引擎实现 | 当服务器返回数据后,引擎不会代替javasc完成页面显示工作,有javasc完成后续的处理 |
引擎也要可以调用javascript, |
4. ajax引擎就是javascript中的对象(XMLHttpRequest)
5. IE实现:
if(window.ActiveXObject){
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
- 非IE实现:
var xmlHttp = new XMLHttpRequest();
- 兼容模式:
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
}
- 发出请求:
xmlHttp.open(请求方式,请求地址,【是否异步请求】)
xmlHttp.send()
- GET请求
//转码:get请求url中有中文 new String(name.getBytes("ISO8859-1"),"UTF-8")
xmlHttp.open('GET',"/ajax?username=xuyy",true)
xmlHttp.send()
- POST请求
//转码:表单提交(POST)含有中文,request.setCharacterEncoding("UTF-8")
xmlHttp.open('POST',"/ajax",true);.//设置请求内容
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username"+username+"&password=123456")//发出请求
- 接收服务器响应
function sendAjax(){
createXMLHttpRequest();
xmlHttp.open("GET","ajax.do?name="+name,true);
//设置form表单请求默认值(请求头)
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = callback;//设置回调函数
xmlHttp.send();
}
//回调函数
function callback(){
alert("callback");
}
//转码:get请求url中有中文 new String(name.getBytes("ISO8859-1"),"UTF-8")
- 获取服务器状态码:
var code = xmlHttp.readyState;
1.已经初始化
2.发送请求数据
3.相应数据传输中
4.相应完毕
- 获取HTTP状态码;
var serverCode = xmlHttp.status;
- ajax 返回值:字符串而已,在response中的所有东西变成一个字符串
- 回调函数
xmlHttp.onreadystatechange = function(){
var state = xmlHtpp.readyState;
if(state == 4){
var httpStaus= xmlHttp.status;
if(httpStaus== 200){
//...................
xmlHttp。responseText
}else{
sout("服务器错误 ")
}
}
}
- 流程
- 给客户端响应也要设置编码
response.setCharacterEncoding(“UTF-8”)
response。setContentType(“text/plain;charset=UTF-8”);//设置客户端响应头