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 ...
随机推荐
- （转）WKT转换工具terraformers
http://blog.csdn.net/gisshixisheng/article/details/53150111 概述: 前面的文章中,提到了Arcgis中实现wkt转换为geometry,但是 ...
- Codeforces_779_D.String Game_(二分)
D. String Game time limit per test 2 seconds memory limit per test 512 megabytes input standard inpu ...
- vim之vimrc配置文件
""""""""""""""""&quo ...
- Redis系列(七)--Sentinel哨兵模式
在上一篇文章了解了主从复制,主从复制本身的容错性很差,一旦master挂掉,只能进行手动故障转移,很难完美的解决这个问题 而本文讲解的sentinel可以解决这个问题 Redis sentinel示意 ...
- Linux System
Linux System linux 是一个功能强大的操作系统,同时它是一个自由软件,是免费的.源代码开放的,编制它的目的是建立不受任何商品化软件版权制约的.全世界都能自由使用的UNIX兼容产品.各种 ...
- NAT、NAPT（PAT）的基本概念和工作原理及区别
转自:http://blog.sina.com.cn/s/blog_5d302bd20100gprv.html 近年来,随着 Internet 的迅猛发展,连入 Internet 的主机数量成倍增长. ...
- NOIP 2006 金明的预算方案(洛谷P1064,动态规划递推,01背包变形,滚动数组)
一.题目链接:P1064 金明的预算方案 二.思路 1.一共只有五种情况 @1.不买 @2.只买主件 @3.买主件和附件1(如果不存在附件也要运算,只是这时附件的数据是0,也就是算了对标准的结果也没影 ...
- python环境配置以及基本知识
python---一种解释型语言(脚本语言),具有代码简洁.入门简单.开发效率高的优点.当然不可避免的有着暴露源码.执行效率低的缺点,但毕竟瑕不掩瑜,在数据是无比宝贵的财富的当下,无疑是一门优秀的编成 ...
- 使用scrapy 爬取酷狗音乐歌手及歌曲名并存入mongodb中
备注还没来得及写,共爬取八千多的歌手,每名歌手平均三十首歌曲算,大概二十多万首歌曲 run.py #!/usr/bin/env python # -*- coding: utf-8 -*- __aut ...
- 利用 Python 批量修改文件名
开发的第一步,首先得熟悉脚本中使用的模块函数,废话不多说,开干! 1 函数介绍 1.1 os 模块 (1)os.lisdir() >>> import os >>> ...