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 ...
随机推荐
- POJ_1083_(思维)
Moving Tables Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31511 Accepted: 10528 D ...
- HDU_1180_诡异的楼梯_BFS
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1180 诡异的楼梯 Time Limit: 2000/1000 MS (Java/Others) Me ...
- JS数组——冒泡、插入、快速排序
前言:因为要对后端返回来的数据进行处理,之前之后冒泡,不够用,去看了插入跟快速,写下这篇笔记. 使用背景: 1.冒泡排序 数据比较少,小于1000 2.插入排序 数据比较少,大于1000不推荐 3.快 ...
- Group共享网元
熟悉TWaver的用户都知道Group的概念,如果是Group,那必然会出现一个网元在多组的情况,最近有客户遇到这个问题,给写了Demo,这些也跟大家分享一下如何实现,先让我们看看共享网元的效果. 熟 ...
- 洛谷——P1516 青蛙的约会
P1516 青蛙的约会 题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件 ...
- Diango REST framework 视图继承图
- CCF201703-1 分蛋糕 java（100分）
试题编号: 201703-1 试题名称: 分蛋糕 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 小明今天生日,他有n块蛋糕要分给朋友们吃,这n块蛋糕(编号为1到n)的重量分别 ...
- Maven学习总结（30）——Maven项目通用三级版本号说明
项目版本号说明 当前版本号:1.0.0-SNAPSHOT 本项目采用通用的三级版本号,版本号格式是[主版本号].[副版本号].[修复版本号]-[稳定状态],如:1.0.0-SNAPS ...
- Ural 1091 Tmutarakan Exams
Tmutarakan Exams Time Limit: 1000ms Memory Limit: 16384KB This problem will be judged on Ural. Origi ...
- ZOJ 3201 树形背包问题
题目大意: 0~n-1号这n个点,每个点有个权值,由无向边形成了一棵树,希望在这棵树上找到一棵长为m的子树使总的权值最小 基本的树形背包问题 令dp[u][j] 表示u号节点对应子树中有j个节点所能得 ...