关于ajax技术

传统注册存在的弊端 :
当我们点击注册时,会存在以下几个问题。
首先,浏览器会销毁当前页面,如果注册失败返回的新页面所有之前
填写的数据丢失。
其次,如果网络通信较差,我们表单提交请求数据到服务端,而服务端
又没有返回新的页面,此时用户处于一个等待状态(打断用户操作)。
另外,如果注册失败。从服务端响应回来的是一个新的注册页面,网络
传输一个页面需要消耗较多的网络资源,那么就会导致网络传输性能
下降。

一 什么是ajax(Asynchronous JavaScript and Xml)?
a 翻译过来就是异步的js和xml技术。
b 可以用来改善用户体验的技术,
c ajax本质是利用浏览器内置的一个特殊对象,异步的向服务器发送请求,服务器
一般只返回部分数据,浏览器接收到这些数据后,通过dom操作对当前页面进行局部
更新。整个过程页面无刷新,不打断用户的操作。

二 如何获取ajax对象
function getXhr(){
var xhr = null;
if(wind.XMLHttpRequest){ // 非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
三 ajax对象重要的五个属性

该用户名可以使用
该用户名已经存在

onreadystatechange:绑定事件处理函数

readyState:0 1 2 3 4 ,只有状态等4,说明ajax对象与服务端之间的交互结束。
此时才可以对页面进行局部的更新。
responseText:接收服务端响应回来的文本

responseXML:接收服务端响应回来的xml文件。

status :对状态码进行判断,200表示正常状态。此时我们只接收状态为200返回的
部分数据。

四 ajax编程步骤

step1 获取ajax对象 var xhr = getXhr();
step2 ajax对象向服务端发送请求
get请求:

step2.1 ajax对象与服务端之间建立通信连接。
xhr.open('get','url','true/false');

第一个参数:表示发送请求的方式。
第二个参数:发送请求的地址 ,如果有参数需要把参数绑定在url请求
地址上。 'checkName.do?uname='+name
第三个参数:如果为true表示发送的是异步请求,
如果false表示发送的是同步请求。

step2.2 ajax对象绑定事件处理函数
xhr.onreadystatechange=f1

step2.3 xhr.send(null)
发送请求到服务端,此时ajax对象会准备一个空的数据包往服务端传递。

step3 编写服务端处理程序,接收ajax请求处理,处理完毕之后响应部分数据
交给ajax对象。 (编写ActionServlet)

step4 编写事件处理函数
function f1(){

}

post请求:

xhr.open('post','checkName.do',true);
xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1
xhr.send("name="+username);

五 解决中文乱码
5.1 get请求乱码的原因?
当发送get请求时,非ie浏览器使用的是utf-8编码,ie浏览器默认使用gbk编码,
而服务端使用的是iso8859-1编码,两边编码不一致所以导致乱码产生。

解决办法
对于非ie浏览器发送的get请求,我们可以去修改server.xml文件添加URIEncoding="utf-8",
默认指定服务端接收个get请求时,使用utf-8接收。

对于ie浏览器我们可以指定发送请求参数时,使用utf-8编码,只需要给发送的url使用
encodeURI(url);

utf-8编码(变长编码):国际化最优编码,存储一个英文或数字,占一个字节。
一个中文字母占三个字节。
gbk:本地化最优编码。存储一个英文字母占一个字节。存储一个汉字占2个字节。

服务端默认使用iso8859-1编码。一个字母占一个字节。

5.2 post请求产生乱码的原因?
当发送post请求时,所有浏览器默认采用utf-8编码。而我们修改server.xml文件
指定编码URIEncoding="utf-8",只针对get请求有效。

解决办法 :
request.setCharacterEncoding("utf-8"); 这行代码只针对post请求有效。
告诉服务端接收浏览器发送过来的参数使用utf-8.

六 缓存问题 ?
当ie浏览器发送get请求时,第一次发送请求之后,请求地址保存在浏览器缓存中。
如果再次发送相同的请求,此时浏览器不会像服务端发送请求。而是直接从缓存中取出
上次访问的历史记录。

解决办法有两种?
1 默认使用post请求。

2 Math.random() 随机产生0~1之间随机数。
'checkName.do?name='+username+'&'+Math.random()

jQuery对ajax的支持
jQuery对ajax支持有两个好处:第一我们不会像以前写原生的ajax,需要写
一堆的模式化代码,我们只需要调用jQuery提供对ajax支持的方法即可,另外
使用原生的ajax去进行dom操作时,会出现浏览器不兼容问题,我们现在如果使用
jQuery,因为jQuery对dom操作封装性非常高,能够帮我们解决大部分浏览器不
兼容的问题,这样jQuery也能够帮助我们解决了ajax浏览器不兼容性问题。

1.load
作用:向服务器发送异步请求,将服务器返回的数据直接添加到符合要求的节点上。
用法:$obj.load(url[,data])
注:url:请求地址
data:请求参数,有两种格式:
字符串格式 "name=tom&age=22"
json对象格式 {"name":"tom","age":22}
该方法如果没有参数则默认发送get请求,如果有参数默认发送POST请求
<div> </div>
$('div').load('')
弊端:只能发送异步请求,不能发送同步请求。返回的数据直接填在当前的节点上,不能对返回的数据进行处理,如果返回是json格式
的数据,显然该方法不能满足要求
2.$.post()/$.get()
作用:只能异步的向服务器发送请求,可以使用回调函数处理服务端返回的数据
用法:$.get(url,[data],[callbock],type);
注:
url:请求地址
data:如果有参数则写,没参数可不写,有两种格式
字符串格式 "name=tom&age=22"
json对象格式 {"name":"tom","age":22}
callback:回调函数可以用来处理服务端返回的数据
function(data,status){

}
其中data表示从服务端获取响应回来的内容,status是一个字符串,描述ajax对象
接受服务端请求的状态(一般可以不写)

type:服务端返回的数据类型,可以是以下几种:
text:文本
HTML:HTML文档
json:json字符串
xml:xml文档
script:javascipt脚本
3.$.ajax() 重点掌握
作用:能够向服务端发送异步或同步请求,并且也可以使用回调函数处理服务端返回的数据
用法:$.ajax({json格式的字符串});
json格式的字符串参数?
$.ajax({
url:'请求的地址',
type:'请求方式 post/get',
data:请求参数{'name':username}或"name=username",
dataType:服务器返回的数据类型(text,html,xml,json,script),
sueccess:function(data,status){//成功接收服务端响应回来的数据
其中data表示从服务端获取响应回来的内容,status是一个字符串,描述ajax对象
接受服务端请求的状态(一般可以不写)
},
error:服务端处理失败调用的回调函数
async:如果 不写则默认为异步请求。也可以指定,false表示为同步,true表示为异步
})

上一篇:Ajax Step By Step3


下一篇:Ajax Step By Step2