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.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
随机推荐
- word20161217
p-node / p 节点 package / 程序包 packet / 数据包 packet assembler/disassembler, PAD / 分组拆装器 packet header / ...
- python界面
import easygui as g import sys while 1: g.msgbox("我一定要学会编程!","加油!") #choices = [ ...
- Ubuntu Server 14.04 --secure-file-priv error in MySql 解决方案
在VPS部署Ubuntu 14.04服务器时,MySQL执行导出文件命令,报错: The MySQL server is running with the --secure-file-priv opt ...
- [转]python 常用类库！
Python学习 On this page... (hide) 1. 基本安装 2. Python文档 2.1 推荐资源站点 2.2 其他参考资料 2.3 代码示例 3. 常用工具 3.1 Pytho ...
- SWFUpload多图上传、C#后端跨域传文件带参数
前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...
- GLUT的简洁OO封装
毕业设计用到了OpenGL,由于不会用MFC和Win32API做窗口程序:自然选用了GLUT.GLUT很好用,就是每次写一堆Init,注册callback,觉得有点恶心,于是对他做了简单的OO封装.记 ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 【python】安装指定模块
使用pip 1.卸载模块 sudo pip uninstall xxx 2.安装指定版本模块 sudo pip install xxx==2.0.1.3
- IE8 下 iframe 滚动条的问题
//设置滚动条 $("iframe[name='updateFocalWork']").attr("scrolling", &qu ...
- brew 安装 mysql
在网上看到各种教程,都会出现ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.soc ...