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.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
随机推荐
- Windows7安装 .net framework 4.0
1.首先下载安装包.net framework 4.0点击下载即可 2.安装,双击下载好的安装包
- 【Android自学日记】两种适配器的使用
ArrayAdapter适配器: (1)用于显示基本的文字内容 (2)基本使用过程:新建适配器---创建或加载数据源---适配器加载数据源---视图加载适配器 ArrayAdapter(上下文,当前L ...
- 超详细Web前端开发规范文档
http://www.w3cfuns.com/notes/26488/c2ae788c77f835357025026a148b9863.html
- JSPatch热更新的利器.
如果用一句话来描述JSPatch,就是利用系统自带的JavaScriptCore.framework配合RunTime机制,进行实时的代码下载与运行.. 而且使用也很简单,启动,加载JS,运行... ...
- JSon解析
1.解析总是犯糊涂 在图中,[] 中括号表示是jsonarray,{} 小括号 表示对象 这个解析可以写成: JSONArray array=new JSONArray(result); for( ...
- HP网络打印机--如何添加打印机
HP网络打印机采用web服务形式,应添加打印机-通过Internet的打印机--填写网址http://192.168.1.10:80(从其他win7电脑-计算机-网络-网络设备中双击添加打印机,然后在 ...
- Quartz定时任务简单实例
文章纲要: 初步搭建一个由Quartz为引擎集群的定时任务模块,功能为每隔30秒打印一条信息(Hello World!!!) 一.环境 Spring MVC Mevan Quartz 2.2.1 二. ...
- WPF制作的VS黑色风格的Listbox
最近写的一个玩具,WPF写出来的东西还是挺好看的 style.xaml <ResourceDictionary xmlns="http://schemas.microsoft.com/ ...
- Http与Socket小谈
http与socket是网络编程中最为重要的概念,不管是客户端还是服务端,都是最为重要的部分,以下简述两者的关系和区别(个人见解). Http 定义 基于应用层的超文本传输协议.通常承载于TCP/IP ...
- Centos7下安装mysql5.7.16
mysql的安装(root用户下) 从官网下载软件 linux下必须安装系统对应的版本,多少位 必须安装的是:server,client 但是我可不管要安装那个插件,我们直接使用bundle版本(就是 ...