Ajax工作流程
Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求。
主要有以下四个步骤：
（1）初始化XMLHttpRequest对象。不同浏览器的差异，需要我们创建一个跨浏览器的对象，并判断XMLHttpRequest对象创建是否成功，如果不成功，则给予提示。
（2）为XMLHttpRequest对象指定一个回调函数，用于对后台返回结果进行处理。
（3）创建一个与服务器的连接，在创建时，需要指定发送请求的方式（GET/POST），以及设置是否采用异步方式发送请求。
（4）向服务器发送请求。
以下是一个用Ajax判断用户名是否正确的样例：
index.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getAnswer(username) {
if(username.value == ""){
alert("请输入用户名");
username.focus();
return;
}
else{
checkUsername("checkusername.jsp?username="+username.value); //参数已整合到url地址中
}
}
function checkUsername(url) {
http_request = new XMLHttpRequest(); //初始化XMLHttpRequest对象
http_request.onreadystatechange = function (){ //回调函数对后台返回结果进行处理
if(http_request.readyState==4){
if(http_request.status == 200){
alert(http_request.responseText);
}
else{
alert("地址有误");
}
}
}
http_request.open("POST",url,true); //链接服务器
http_request.send(null); //发送请求，这里不用带参数，前面参数已经整合进url中。
}
</script>
</head>
<body>
<form action="" method="get" name="form1">
用户名：
<input type="text" name="username"><br>
密码：
<input type="password" name="passwd"><br>
<input type="submit" value="提交" onclick="getAnswer(this.form.username)">
</form>
</body>
</html>
checkusername.jsp(后台处理)：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String s = new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");
if(s.equals("Tom")){
out.print("此用户已注册");
}
else{
out.print("恭喜你注册成功");
}
%>
另一种实现方法：（post方法，但传参数）
index.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getAnswer(username) {
if(username.value == ""){
alert("请输入用户名");
username.focus();
return;
}
else{
checkUsername("checkusername.jsp",username);
}
}
function checkUsername(url,username) {
http_request = new XMLHttpRequest(); //初始化XMLHttpRequest对象
var param = "username="+username.value;
//alert(username.value);
http_request.onreadystatechange = function (){ //回调函数对后台返回结果进行处理
if(http_request.readyState==4){
if(http_request.status == 200){
alert(http_request.responseText);
}
else{
alert("地址有误");
}
}
}
http_request.open("POST",url,true); //链接服务器
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置表头
http_request.send(param); //发送请求，这里不用带参数，前面参数已经整合进url中。
}
</script>
</head>
<body>
<form action="" method="get" name="form1">
用户名：
<input type="text" name="username"><br>
密码：
<input type="password" name="passwd"><br>
<input type="submit" value="提交" onclick="getAnswer(this.form.username)">
</form>
</body>
</html>
疑问：
1.两种方法有什么不同
2.第二种方法为什么要设置表头，而且第二种写法为什么只能测试一次，第二次填个用户名测试就无反馈
Ajax工作流程的更多相关文章
- Ajax的工作流程简述
提到Ajax相信我们都不会陌生,不管你是前端开发还是后台数据处理的程序员,ajax的作用就像现在生活中的手机一样,无论是作用还是流程都差不多,这里我们要进行ajax操作后台数据并显示在页面上的话,首先 ...
- js.ajax优缺点，工作流程
1.ajax的优点 Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点: 1.最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好. 2.使用异步方式与服务器通信,不 ...
- Ajax工作原理
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
- 关于Ajax工作原理
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Ajax工作原理（转）
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- aJax学习之Ajax工作原理
转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...
- Redux的工作流程
1.Redux 是一个专门用来管理数据业务或逻辑状态的框架,它也可以实现代码结构的规范化并提供组件之间通信的便利,而这两点,对于大型应用来说非常关键. 2.工作流程: Redux 三大原则 单一数据源 ...
- Ajax工作原理及实例
1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...
- ajax工作原理(转)
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
随机推荐
- discuz首页设置默认地址不带forum.php后缀的方法
最近在研究discuz,上传安装几部搞定,打开首页跳到含有"/forum.php"的网址,到管理中心改了好一会儿也没好.那么如何实现discuz首页设置不带forum.php后缀呢 ...
- C#string类型总结
字符串的特性:不可变性,每对字符串做拼接或者重新赋值之类的操作,都会在内存中产生一个新的实例. 所以说,在.Net平台下,如果你对一个字符串进行大量的拼接赋值等操作,会产生大量的垃圾. --- ...
- [mark] 使用Sublime Text 2时如何将Tab配置为4个空格
在Mac OS X系统下,Sublime Text是一款比较赞的编辑器. 作为空格党的自觉,今天mark一下使用Sublime Text 2时如何将Tab配置为4个空格: 方法来自以下两个链接: ht ...
- JAVA基础学习——1.1 环境搭建 之jdk安装，环境变量配置 （系统Win10，64bit）
大学里虽然老师教过JAVA,但我没学.后来工作了,断断续续的也碰到了JAVA的项目,都是拉过来就干的节奏.也没有好好系统的学习一下. 从今天开始系统学习整理一下JAVA,以后再碰到JAVA项目的时候, ...
- Ajax跨域：jsonp还是CORS
跨域一般用jsonp,兼容性比较好.CORS是html5最新的XHR第二版本,不支持IE8,IE9,对移动端的支持非常好.但是考虑项目后期这部分会转到同域名下,而且网址不需要支持ie8,ie9,所以我 ...
- Appium 三种wait方法（appium 学习之改造轮子）
前些日子,配置好了appium测试环境,至于环境怎么搭建,参考:http://www.cnblogs.com/tobecrazy/p/4562199.html 知乎Android客户端登陆:htt ...
- Reverse Core 第二部分 - 16&17章 - 基址重定位表&.reloc节区
第16-17章 - 基址重定位表&.reloc节区 @date: 2016/11/31 @author: dlive 0x00 前言 这几天忙着挖邮箱漏洞,吃火锅,马上要被关禁闭,看书进度比较 ...
- SqlServer 2008登录时报错
登录SQLServer2008R2时提示如下错误: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server ...
- Tomcat7.0+的JNDI问题
上次搭建spring+springmvc+mybatis框架时用的第三方连接池jar包,但是部署到tomcat中后访问没有问题,但是启动时报了个JNDI的错,我没用JNDI你给我报什么,fuck!把错 ...
- AngularJS2
//package.json 用来标记本项目所需的npm依赖包{ "name": "angular-quickstart", "version&quo ...