(Servlet)Ajax

原创 2015年07月07日 09:28:34

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的应用

  • 输入的值需要校验,如检测注册的用户名是否已被占用
  • 级联显示
  • 数据录入和列表显示在同一个页面
  • 不需要舒心的翻页
版权声明:本文为博主原创文章,允许转载,请标明出处。

ajax提交中文到servlet

  • 2017年09月10日 21:24
  • 9KB
  • 下载

Ajax向Servlet传值小实例

Ajax向Servlet传值小实例通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。下面是使用Ajax向后台Ser...

AJAX_Servlet技术的注册系统

  • 2016年01月13日 17:48
  • 2KB
  • 下载

ajax到servlet乱码解决

  • 2014年02月18日 13:40
  • 14KB
  • 下载

基于Servlet百度搜索效果的Ajax的实现实例

在现在的web开发中,ajax技术经常会使用到,无刷新,响应快的特点也成为大家选择ajax的直接原因,本文通过一个简单的实例,提供类似百度搜索时候可以提供搜索结果选择的效果,来对ajax有着项目中的认...

ajax异步文件上传,servlet处理,含demo

ajax上传组件源自于http://www.phpletter.com/Demo/AjaxFileUpload-Demo/,用的jquery 不过它服务器端用的是php,原理都是一样的,我改成了jav...
  • thc1987
  • thc1987
  • 2013年11月11日 18:02
  • 30672
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(Servlet)Ajax
举报原因:
原因补充:

(最多只允许输入30个字)