Ajax学习---1（初步了解）

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.onready
bcc7
statechange = 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”）;//设置客户端响应头