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.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
随机推荐
- 为什么要用base64编码
1.需求 了解为什么要使用base64对数据编码 2.理由 因为传输二进制数据的时候,网络中间的有些路由会把ascii码中的不可见字符删了,导致数据不一致.一般也会对url进行base64编码 Whe ...
- ms08-067漏洞--初识渗透测试--想必很多初学者都会遇到我文中提及的各种问题
最近读了一本书--<<渗透测试实践指南>>,测试了书中的一些例子后,开始拿ms08-067这个经典的严重漏洞练手,实践当中遇到诸多问题,好在一一解决了,获益匪浅. 在谷歌搜索的 ...
- docker swarm-mode
root@node1:~# docker versionClient: Version: 1.12.3 API version: 1.24 Go version: go1.6.3 Git commit ...
- cxf WebService设置wsdl中soapAction的值
用cxf开发一个WebService很简单,只需要下面几步: 1.定义接口 public interface HelloService { String hello(); } 2.实现 public ...
- append 添加的元素重新绑定事件
在jQuery当中append是动态向页面中添加元素的常见方法,但是很多时候append添加之后的节点再次绑定事件(比如click)的时候,就会发现click失效,这时候就会涉及到,on() 高版本的 ...
- html BOM、DOM
- NGUI之UIRoot——屏幕的自适应分辨率的计算
//原来写在其他博客上的东西,搬迁 预备知识: 要明确的三个概念: 设计分辨率:在编辑器上开发UI使用的分辨率.我们所有的UI都是在这个分辨率下设计制作的. 显示区域分辨率:设备上所显示的UI区域在编 ...
- ifconfig: command not found 如何解决？
ifconfig: command not found 查看path配置(echo相当于c中的printf,C#中的Console.WriteLine) 1 echo $PATH 解决方案1:先看看是 ...
- 【协议分析】Wireshark 过滤表达式实例
Wireshark 过滤表达式实例 1.wireshark基本的语法 字符 \d 0-9的数字 \D \d的补集(以所以字符为全集,下同),即所有非数字的字符 ...
- 【leetcode】ZigZag Conversion
题目简述 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows ...