关闭

(Servlet)Ajax

标签: ajaxservlet
304人阅读 评论(0) 收藏 举报
分类:

Ajax的定义

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

Ajax工作原理

Ajax工作原理

如何获得Ajax对象

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

异步对象的属性和方法

属性/方法 说明
abort() 取消请求
getAllResponseHeaders() 获取相应的所有Http头
getResponseHeader() 获取指定的Http头
open(method,url) 创建请求,method请求类型 get post
send() 发送请求
setRequestHeader() 指定请求的Http头
onreadystatechange 发生任何状态变化时的事件控制对象
readyState 请求的状态
0尚未初始化
1正在发送请求
2请求完成
3请求成功,正在接收数据
4数据接收成功
responseTest 服务器返回的文本
responseXML 服务器返回的xml,可以当做DOM处理
status 服务器返回的http请求响应值常用的有:
200 表示请求成功
202 请求被接受,但处理未完成
400 错误的请求
404 资源未找到
500 内部服务器错误,如asp代码错误等

onreadystatechange

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

readyState

  • readyState:一共有5个值,分别是0,1,2,3,4,分别表示Ajax对象与服务器通信的状态
  • 比如,当值为4时,表示Ajax对象已经获得了服务器返回的所有的数据

发送异步请求的步骤

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

1、获取Ajax对象

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

2、编写回调事件处理函数

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        var txt = xhr.responseText;
        //DOM操作
    }
}

3.1、创建请求-GET请求

xhr.open('get','xx.do',true);
  • 注意:
  • true:表示发送异步请求(当Ajax对象发请求时,用户仍然可以对当前页面做其他的操作)
  • false:表示发送同步请求(当Ajax对象发送请求时,浏览器会锁定当前页面,用户不能对当前页面做其他操作)

3.2、创建请求-POST请求

xhr.open('opst','xx.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  • setRequestHeader的作用:因为HTTP协议要求发送post请求时,必须有content-type消息头,但是默认情况下xhr(即Ajax对象)不会添加该消息头,所以,需要调用setRequestHeader方法,添加这个消息头

4、发送请求

GET  请求  xhr.send(null)
POST 请求  xhr.send(name =value & name = value...)
  • GET请求:
    • send方法内传递null
    • 若要提交数据,则在open方法的“URL”后面追加
    • 如:xhr.open(“get”,”xx.do?naem=value&name=value”,true)
      ####编写服务器端代码
    • 服务器返回的一般是部分数据,比如一个简单的文本。
public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html,charset=utf-8");
    PrintWriter.out = response.getWriter();
    out.println("用户名已经存在");
}

Ajax的应用

  • 输入的值需要校验,如检测注册的用户名是否已被占用
  • 级联显示
  • 数据录入和列表显示在同一个页面
  • 不需要舒心的翻页
0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:81817次
    • 积分:2205
    • 等级:
    • 排名:第17908名
    • 原创:124篇
    • 转载:59篇
    • 译文:1篇
    • 评论:5条