你的位置:首页 > Java教程

[Java教程]Ajax的概述与实现过程


一、ajax概述

1、Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript

2、Ajax技术的核心是

3、XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息,意味着用户单击后,可以不必刷新页面也能获取新数据。也就是说可以使用XHR对象取得新数据,然后再通过DOM将新数据插入到页面中

4、虽然Ajax名字中有

 

二、操作:原生ajax和jQuery中封装的ajax

1、原生ajax:

ajax作用:发送请求(设置请求setRequest) 接收响应(getResponse)

A、ajax原生方式发送请求:

Ajax中最重要也是最固定的部分就是http请求。

1)    建立连接: (IE7及以上版本都支持

1 var xhr = new //创建异步请求对象

2)    Get请求:格式必须是(url?name1=value1&name2=value2)

1 xhr.open("get","01-register.php?name="+name);//初始化异步get请求2 xhr.send(null); //与服务器建立连接

3)    Post请求

1 xhr.open('post','01-//请求报文行2 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/3 xhr.send('name=rose&age=20'); //请求报文体

4)    get和post请求的区别:

★get不需要设置请求头,而post需要设置请求头

★get的数据传递通过url进行,而post的数据在send方法中传递

B、ajax原生方式接收响应:
1 /*监听服务器的响应*/2 xhr.onreadystatechange=function(){3   /*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/4   if(xhr.status==200 && xhr.readyState==4){5     var result=xhr.responseText;6     console.log(result); //输出从服务器中获取到的数据7   //接下来就可以对数据进行相应的处理了8   }9 };

C、处理响应数据:
 1 /*监听*/ 2 xhr.onreadystatechange=function(){ 3   if(xhr.status==200 && xhr.readyState==4){  /*判断状态*/ 4     var result; 5     /*获取响应报文中的Content-Type*/ 6     var ct=xhr.getResponseHeader("Content-Type"); 7     /*判断Content-Type,进行数据的解析*/ 8     if(ct.indexOf("){ 9       result=xhr.response10     }11     else if(ct.indexOf("json") !=-1){12       result=JSON.parse(xhr.responseText);13     }14     else{15       result=xhr.responseText;16     }17     /*调用回调函数--委托--代理*/18     success && success(result);19   }20 };

2、jQuery中封装的ajax

1 $.ajax({2   type: 请求方式(get/post),3   url: "register.php",4   data: 发送请求数据,5   beforeSend:function(){返回false可以取消本次ajax请求},6   success:function(result){ 成功响应后调用 },7   error:function(err){ 错误响应时调用 },8   complete:function(){ 响应完成时调用(包括成功和失败) }9 });

jQuery中提供了专门的方法来序列化表单:

 

1 $('form').serialize():  //序列化表单(即格式化key=val & key=val);

 

三、响应

我们需要监听服务器的响应状态,然后对从服务器中获取的数据做相应的处理。

1)    onreadystatechange是JavaScript事件中的一种,用于监听

2)    readystate:响应状态,返回

readyState 状态

状态说明

(0)未初始化

此阶段确认

(1)载入

此阶段对

(2)载入完成

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

(3)交互

此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或response

(4)完成

此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过


3)    status:服务器的响应码

常见响应码:200—服务器成功返回网页

                      404—请求网页不存在

                      503—服务不可用

 

关于服务器响应码,详情请看————网络传输协议