(Servlet)Ajax

Ajax的定义

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

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 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

C# WCF 完整实例,winform 窗体作为 宿主

上一次提到,我们的WCF程序宿主是发布到IIS上面的。虽然这样做未尝不可,不过不便于我们进行“开始”或“停止”WCF服务的操作。所以再次尝试了编写以窗体应用程序...

56440
来自专栏技术博客

ExtJs九(ExtJs Mvc用户管理之一)

首先要做的是为用户信息创建一个模型,在Scripts\app\model目录下创建一个名为User.js的文件,然后添加以下模型定义代码:

12420
来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

58890
来自专栏有趣的django

Django搭建blog网站(一)

一、前言 1.1.环境 python版本:3.6 Django版本:1.11.6 1.2.预览效果 最终搭建的blog的样子,基本上满足需求了。框架搭好了,至于...

95780
来自专栏WindCoder

Vuejs学习笔记-vue-cli

这篇使用vue构建工具vue-cli创建vue项目的本应该是在基础篇发完之后的,无奈基础篇有点久了,先把今天学的记录下。

39010
来自专栏西安-晁州

vuejs、eggjs、mqtt全栈式开发设备管理系统

vuejs、eggjs、mqtt全栈式开发简单设备管理系统 业余时间用eggjs、vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展...

3K70
来自专栏大史住在大前端

javascript基础修炼(6)——前端路由的基本原理

现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,...

16930
来自专栏程序员互动联盟

【专业技术】Linux下如何提高效率

之前写了一篇关于linux下常用的几个命令,参考Linux入门--提高工作效率的命令 一、bash shell中的快捷键 光标移动命令 Ctrl + a - 跳...

37670
来自专栏逸鹏说道

GeetTest~下一代验证(附C#案例)

基本介绍 极验验证除了在服务器端提供了广泛的语言支持外,在客户端也提供了多平台的扩展支持。 客户端主要涵盖了如下平台: pcWeb 普通台式电脑,笔记本电脑w...

456110
来自专栏自动化测试实战

获取响应头与发送头

48560

扫码关注云+社区

领取腾讯云代金券