Ajax之XMLHttpRequst对象
XMLHttpRequest对象提供客户端与Http服务器异步通信的协议。通过该协议，Ajax可以使页面像桌面应用程序一样，只同服务器进行数据层的交换，而不用每次都刷新页面，也不用每次将数据处理工作提交给服务器来做，这样既减轻了服务器的负担又加快了响应速度，缩短了用户等待的时间。
Ajax请求和响应过程如下：
- 网页调用JavaScript 程序
- JavaScript利用浏览器提供的XML对象向Web服务器发送请求
- 请求的URL资源处理后返回结果给浏览器的XMLHTTP对象
- XMLHTTP对象调用实现设置的处理方法
- JavaScript方法解析返回的数据，利用返回的数据更新页面
| abort() | 停止当前请求 |
| getAllResponseHeader("header") | 将Http请求的所有响应首部作为键值对返回 |
| open("method","url"[,"asyncFlag"[,"userName"[,"password"]]]) | asyncFlag=是否非同步标记 |
| send(content) | 向服务器发送请求 |
| setRequestHeader("header","value") | 把指定首部设置为所提供的值，在调用该方法之前必须先调用open方法 |
| getResponseHeader("header") | 返回指定首部的字符串值 |
| onreadystatechange | 状态该表触发器，每个状态改变都会触发这个事件触发器 |
| readyState |
对象状态： 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成 |
| responseText | 服务器的相应，字符串 |
| responseXML | 服务器的相应，XML，该对象可以解析为一个DOM对象 |
| status | 服务器返回的HTTP状态码 |
| statusText | HTTP状态码的相应文本 |
建立项目名为AjaxTest：
编写Servlet 类 CheckUser：
package org.servlet; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class CheckUser extends HttpServlet { @Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//为方便起见，这里假设数据库中有这些学号
//在实际应用中应该是从数据库中查询得来的
String[] xhs = {"01001","01002","01003"};
//取得用户填写的学号
String xh = request.getParameter("xh");
//设置响应内容
String responseContext = "true";
for (int i= 0; i< xhs.length; i++) {
//如果有该学号，修改响应内容
if (xh.equals(xhs[i])) {
responseContext="false";
}
}
//将处理结果返回给客户端
out.print(responseContext);
out.flush();
out.close(); } }
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>AjaxTest</display-name>
<servlet>
<servlet-name>CheckUser</servlet-name>
<servlet-class>org.servlet.CheckUser</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUser</servlet-name>
<url-pattern>/CheckUser</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html>
<head>
<title>Ajax应用</title>
</head>
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest对象
function createHttpRequest(){ if(window.ActiveXobject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function beginCheck(){
//得到用户填写的学号
var xh=document.all.xh.value;
//如果为空
if(xh==""){
alert("对不起，请输入注册学号！");
return ;
}
createHttpRequest();
//将触发器绑定到一个函数
xmlHttp.onreadystatechange=processor;
//通过post方法向指定的URL，即Servlet对应URL建立服务器的调用
xmlHttp.open("post","CheckUser?xh="+xh);
//发送请求
xmlHttp.send(null);
}
//处理状态改变函数
function processor(){
var responseContext;
//如果响应完成
if(xmlHttp.readyState==4){
//如果返回成功、
if (xmlHttp.status == 200) {
//取得响应内容
responseContext = xmlHttp.responseText;
//如果注册名检查有效
if (responseContext.indexOf("true")!=-1) {
alert("恭喜你，该学号有效");
} else {
alert("对不起，该学号已经被注册！");
}
}
} }
</script>
<body>
<form action="">
<!-- 当输入框改变时执行bengincheck()函数 -->
学号:<input type="text" name="xh" onchange="beginCheck()"/><br/>
口令:<input type="password" name="kl"/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
Ajax之XMLHttpRequst对象的更多相关文章
- 使用原生JS编写ajax操作XMLHttpRequst对象
ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...
- Ajax的核心对象创建步骤
* Ajax具有核心对象 * XMLHttpRequest对象 * 如何创建XMLHttpRequest对象 function getXhr(){ // 声明XMLHttpRequest对象 var ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）
js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- ajax 传递JSON对象参数
https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...
- 转:AJAX中xhr对象详解
XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...
- ajax和json对象
二维数组 首先是输出json字符串的php文件 header("Content-type: text/html; charset=utf-8"); //json设置utf-8 $a ...
随机推荐
- vba txt读写的几种方式
四种方式写txt 1.这种写出来的是ANSI格式的txt Dim TextExportFile As String TextExportFile = ThisWorkbook.Path & & ...
- 17Oracle Database 维护
Oracle Database 维护 备份 还原
- 洛谷——P3369 【模板】普通平衡树（splay）（基础splay，维护一些神奇的东东）
P3369 [模板]普通平衡树 平衡树大法好,蒟蒻(博主)最近正在收集高级数据结构的碎片,企图合成数据结构的元素之力来使自己的RP++... 您需要写一种数据结构(可参考题目标题),来维护一些数,其中 ...
- python环境配置以及基本知识
python---一种解释型语言(脚本语言),具有代码简洁.入门简单.开发效率高的优点.当然不可避免的有着暴露源码.执行效率低的缺点,但毕竟瑕不掩瑜,在数据是无比宝贵的财富的当下,无疑是一门优秀的编成 ...
- LINUX-SWAP文件系统
mkswap /dev/hda3 创建一个swap文件系统 swapon /dev/hda3 启用一个新的swap文件系统 swapon /dev/hda2 /dev/hdb3 启用两个swap分区
- python基础学习 str,list,dict,set,range,enumerate
一.字符串 s = 'python' s1 = 'python' + 'learn' #相加其实就是简单拼接 s2 = 'python' * 5 #相乘其实就是复制自己多少次,再拼接在一起 字符串切片 ...
- PAT 1139 First Contact
Unlike in nowadays, the way that boys and girls expressing their feelings of love was quite subtle i ...
- SpringSecurity 获取认证信息 和 认证实现
JdbcDaoImpl 实现获取认证信息 PasswordEncoder 实现具体认证过程
- POJ3624 0-1背包(dp+滚动数组)
Charm Bracelet Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 47440 Accepted: 20178 ...
- 【11】AngularJS HTML DOM
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 ...