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.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
随机推荐
- 如何在centos下部署Node环境
从今年开始,养车之家的PC 和 M端 的站点 ,服务器从tomcat全部改成了Node,无论在测试环境.准生产.正式环境,我们都需要在服务器进行Node的部署,在这里我给大家详细说明下Node在lin ...
- AndroidStudio非法字符: '\ufeff'解决
一. 问题解决办法 在昨天,帮助同学把他的Android项目从eclipse迁移到Android Studio上面的时候,编译时,Android Studio报了一个错误, ***.java Erro ...
- [每日一记] Python报错 综述
提纲 -- Syntax errors -- Static semantic errors -- Full semantic errors -- 使用一门语言,不论是自然语言还是编程语言,我们需要注意 ...
- 将MongoDB服务加入随机启动
将MongoDB服务加入随机启动 vi /etc/rc.local 使用vi编辑器打开配置文件,并在其中加入下面一行代码 /usr/local/mongodb/bin/mongod -dbpath=/ ...
- kali python pip3 的安装和卸载
今天很高兴安装完成调整了kali 然后看见kali已经帮助我安装了python2.7和python3.5可把我开心坏了,可是2.7有pip,而且包很全,但2.7与3.0切换使用我的就尴尬了 最后在su ...
- Windows Server 2012 R2桌面化详细设置图解
一.任务栏左下角启动服务器管理器,然后进行设置. 1.登录不显示服务器管理器 2.本地服务器,看到右边的IE增强的安全配置,如图所示,关闭两项内容.这样就关闭了IE增强安全提示框. 3.“工具”菜单, ...
- [转]Android静态变量的生命周期
原文地址:https://my.oschina.net/jerikc/blog/137207 Android是用Java开发,其静态变量的生命周期遵守Java的设计.我们知道静态变量是在类被load的 ...
- VMWare虚拟机实例拷贝到另一台服务器后出现Error in the RPC receive loop: RpcIn: Unable to send.错误的解决
把一个VMWare虚拟机实例拷贝到另一台服务器后,在事件查看器中的应用程序日志中不断出现Error in the RPC receive loop: RpcIn: Unable to send.错误, ...
- 如何在eclipse中通过Juit进行单元测试
1.什么是Junit Junit即单元测试,是JAVA语言的单元测试框架,是对程序的一个方法所进行的测试 一般都是由程序员自己通过Junit来进行测试,因此单元测试也叫程序员测试: 如果测试人员熟悉程 ...
- PHP 继承多态知识点
//1.封装//目的:为了使类更加安全//做法://1.将成员变量变为私有的//2.在类里面做一个方法来间接的访问成员变量//3.在该方法里面加控制 //2.继承//1.父类//2.子类//子类可以继 ...