Ajax详解
一:什么是Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
二:Ajax中的对象和方法说明
Ajax的核心对象就是xmlHttpRequest
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1：方法
xmlHttpRequst对象利用send()和open()方法与服务器进行交互。
open(method,url,async)
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string)
- string：仅用于 POST 请求
如果是post请求，必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
2 ：属性
readyState
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
State
- 200: "OK"
- 404: 未找到页面
responseText
- 获得字符串形式的响应数据。
responseXML
- 获得 XML 形式的响应数据。
onreadystatechange
- 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
三:Ajax运行原理(为什么要用Ajax)
ajax通过xmlhttpRequest对象执行操作，其中xmlhttpRequest对象是在浏览器中内置的一个对象
其运行原理就相当于创建了一个请求代理，通过代理去完成与服务器的交互，交互的过程中客户不需要等待，还可以进行其它的工作，交互完成以后，代理再将交互的结果返回给客户页面。
第一步:创建xmlHttpRequest对象，每个浏览器的创建不是都相同。
注意：如果需要提起多个请求，需要创建多个XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari创建方式
xmlHttp=new XMLHttpRequest();
}
else
{// IE6, IE5 创建方式
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
通常情况下为了兼容所有浏览器，每个都要写上。
第二步：设置open（）方法和setRequestHeader()方法参数。
将请求方式，请求目的地址，和请求类型设置到open方法中，如果是post请求，则需要设置setRequestHeader()参数
第三步：发送执行
利用send方法，与服务器真正的交互执行
第四步：获得执行结果
首先判断执行是否完成，然后通过js操作dom元素，将返回的responseText返回到页面
xmlHttp.onreadystatechange=function()
{
//判断是否发送成功，是否找到请求页面等
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
//操作页面元素
document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
}
}
四:Ajax实例(焦点离开验证用户是否存在)
利用ajax在焦点离开的时候判断注册的用户是否存在
function validate(field){
if (trim(field.value).length != 0) {
var xmlHttp=null;
//创建XMLHttpRequest
if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari创建方式
xmlHttp=new XMLHttpRequest();
} else {// IE6, IE5 创建方式
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//每次请求的url地址不同，利用时间产生不同url地址，可以防止缓冲造成问题
var url = "user_validate.jsp?userId=" + trim(field.value) + "&tamp=" + new Date().getTime();
xmlHttp.open("GET", url, true);
//方法地址，处理完成后自动调用，回调
xmlHttp.onreadystatechange=function(){ //匿名函数
if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
if (xmlHttp.status == 200) { //http协议成功
document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}else {
alert("请求失败，错误码=" + xmlHttp.status);
}
}
} ;
//将参数发送到Ajax引擎
xmlHttp.send(null);
}else {
document.getElementById("userIdSpan").innerHTML = "";
}
}
部分页面代码：
<input name="userId" type="text" class="text1" id="userId" size="10" maxlength="10" value="<%=userId%>" onblur="validate(this)">
<span id="userIdSpan"></span>
//后台验证方法利用jsp编写
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" import="com.bjpowernode.drp.sysmgr.manager.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<%
String userId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId)!=null){
out.println("用户代码已存在!");
}
%>
</body>
</html>
注意：使用Ajax技术需要清除缓存，否则容易产生莫名其妙的错误，具体有两种方法：
1)采用URL后跟上时间戳来防止浏览器缓存，如
//每次请求的url地址不同，利用时间产生不同url地址，可以防止缓冲造成问题
var url = "user_validate.jsp?userId=" + trim(field.value) + "&tamp=" + new Date().getTime();
2)加入清除缓存代码，如：
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store");//HTTP1.1
response.setHeader("Pragma","no-cache");//HTTP1.0
response.setDateHeader("Expires",0);
Ajax详解的更多相关文章
- $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
[一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...
- Ajax详解及使用Ajax时的返回值类型有哪些？
Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...
- $.ajax()详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery中$.ajax()详解(转)
JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get) ...
- AJAX 详解注释很全来自互联网
1: //用户名校验的方法 2: //这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互 3: var xmlhttp; 4: function verify(){ 5: //1. ...
- jquery ajax详解
详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...
- Validform使用ajax详解
demo.config({ showAllError:true, url:"这里指定提交地址", ajaxpost:{ //可以传入$.ajax() ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表
本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...
随机推荐
- javascript判断数组中是否包含某个元素
//判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false function array_contain(array, obj){ for (var i = 0; i ...
- [转]Asp.Net Core 简单的使用加密的Cookie保存用户状态
本文转自:http://www.cnblogs.com/Joes/p/6023820.html 在以前的Asp.Net中可以用 FormsAuthentication 类的一系列方法来使用加密的Coo ...
- Ubuntu 14.04 LTS 下升级 gcc 到 gcc-4.9、gcc-5 版本
如果没记错的话,阿里云ECS上的Ubuntu也是LTS版本. 如果还在使用较旧版本的Ubuntu,或者是Ubuntu LTS,那么我们是很难体验新版gcc的.怎么办呢? 我们或许可以自己去编译用旧版本 ...
- [LeetCode] Top K Frequent Elements 前K个高频元素
Given a non-empty array of integers, return the k most frequent elements. For example,Given [1,1,1,2 ...
- [LeetCode] Graph Valid Tree 图验证树
Given n nodes labeled from 0 to n - 1 and a list of undirected edges (each edge is a pair of nodes), ...
- [LeetCode] Course Schedule 课程清单
There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...
- underscore 源码解读之 bind 方法的实现
自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊. 前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读 ...
- bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
- UDP Server
//UDP服务器端程序,可以接受广播,不可接受多播,多播需要join播地址@Override public void run() { while (true) { try { DatagramSock ...