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 ...
随机推荐
- oracle查询性能优化
原文http://www.cnblogs.com/cnjava/archive/2013/02/28/2937699.html 讲解的oracle数据库面对大数据如何优化查询.
- XML解析——Java中XML的四种解析方式（转载 by 龍清扬）
XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不同而已. XML的解析方式分为四 ...
- 手机端h5复制功能
html: <a href="javascript:;" id="copyBtn" class="f-r tac" data-clip ...
- A6. JVM 垃圾回收算法（GC 算法）
[概述] 常见的垃圾回收算法有:标记-清除算法.复制算法.标记-整理算法.分代收集算法. [标记-清除算法] 标记-清除算法是最基础的收集算法,如同它的名字一样,算法分为 “标记” 和 “清除” 两个 ...
- 洛谷——P2734 游戏 A Game
P2734 游戏 A Game 题目背景 有如下一个双人游戏:N(2 <= N <= 100)个正整数的序列放在一个游戏平台上,游戏由玩家1开始,两人轮流从序列的任意一端取一个数,取数后该 ...
- 阿里云安装nodejs
cd进入root目录下: cd /root 下载node.js安装包 wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.x ...
- python爬虫28 | 你爬下的数据不分析一波可就亏了啊，使用python进行数据可视化
通过这段时间 小帅b教你从抓包开始 到数据爬取 到数据解析 再到数据存储 相信你已经能抓取大部分你想爬取的网站数据了 恭喜恭喜 但是 数据抓取下来 要好好分析一波 最好的方式就是把数据进行可视化 这样 ...
- LINUX-文件系统分析
badblocks -v /dev/hda1 检查磁盘hda1上的坏磁块 fsck /dev/hda1 修复/检查hda1磁盘上linux文件系统的完整性 fsck.ext2 /dev/hda1 修 ...
- Mac安装virtualwrapper时报错No module named virtualenvwrapper
1. 前言 我在使用mac安装virtualwrapper的时候遇到了问题,搞了好长时间,才弄好,在这里总结一下分享出来,供遇到相同的问题的朋友使用,少走些弯路. 2. 问题说明 Mac默认系统的py ...
- Turtle-可视化界面画圣诞树
圣诞节(Christmas)又称耶诞节.耶稣诞辰,译名为“基督弥撒”,是西方传统节日,起源于基督教,在每年公历12月25日.弥撒是教会的一种礼拜仪式.圣诞节是一个宗教节,因为把它当作耶稣的诞辰来庆祝, ...