Ajax上

什么是Ajax?
Asynchronous JavaScript and XML 异步的JavaScript和xml
.Ajax是一种用来改善用户体验的技术.其实质是,使用XMLHttpRequest对象异步地向服务器发请求
.服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容

如何获取Ajax对象
<script type="text/javascript">
   function getXhr(){
       var xhr = null;
       if(window.XMLHttpRequest){
       xhr = new XMLHttpRequest();
       }else{
           xhr = new ActiveXObject("Microsoft.XMLHttp");
       }
       return xhr;
   }
</script>

Ajax对象的属性和方法
abort() 取消请求
open(method,url) 创建请求,method请求类型post和get.
send();
onreadystatechange(客户端):
readyState:       请求状态:0 尚未初始化
                       1 正在发送请求
                       2 请求完成
                       3 请求成功,正在接受数据
                       4 数据接收成功

status       服务器返回的http请求响应值
           常用的有:
                   200 表示请求成功
                   202   请求被接受
                   304 没有发生改变
                   400   错误的请求
                   404 资源未找到
                   500   内部服务器错误,比如jsp代码错误等

responseText     服务器返回的文本
responseXML       服务器返回的xml,可以当做DOM处理

发送异步请求的步骤:
1.获取Ajax对象:获取XMLHttpRequest对象实例
2.设置回调函数:为Ajax对象onreadystatechange事件设定响应函数
3.创建请求:调用XMLHttpRequest对象的open方法
4.发送请求:调用Ajax对象的send方法

onreadystatechange:绑定一个事件处理函数,该函数用来处理onreadystatechange事件
ps:当Ajax的readState的值发生了改变,比如从0变成1,就会产生onreadystatechange事件

readyState:一共有5个值,分别表示Ajax对象和服务器通信状态

xhr.open("GET","hello.do",true);

true:表示发送异步请求(当Ajax对象发请求时,用户仍然可以对页面做其他操作)
false:表示发送异步请求(当Ajax对象发请求时,用户不可以对页面做其他操作)

发送请求:
GET 请求xhr.send(null)
POST请求xhr.send(name=value&name=value..)
ps:
GET请求
-send方法内传递null
-若要提交数据,则在open方法的url属性后面追加
xhr.open("GET","action.do?name=value&name=value",true);

使用Ajax对象POST请求
使用AJax对象发送POST类型的请求,并向服务器提交一小段文本,显示从服务器端返回的文本

ps:
setRequestHeader的作用:因为HTTP协议要求发送post请求是必须要有一个Content-type
消息头,但是默认情况下Ajax对象是不会添加消息头的,所以调用setRequestHeader方法进行
设置
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
目前为止我们都是一个小文本

小结:
Ajax的应用
1.输入的值需要校验,如检查注册的用户名是否被占用
2.搜索时出现的自动提示列表
3.级联显示
4.数据录入和列表显示在同一个页面
5.不需要刷新的翻页

猜你喜欢