学习Ajax

1,AJAX 是 异步 JavaScript  + XML，是HTML网页的异步传输技术在等待网页的传输过程中，用户依然可以和系统进行交互页面不用刷新就可以更新内容

2，示例：

客户端触发

<td width="78%"><input name="userId" type="text" class="text1" id="userId"  size="10" maxlength="10“ οnblur="validate()"><spanid="resText"></span></td>

创建XHR

var xmlHttp;
 
function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function validate() {
createXMLHttpRequest();
var userId = document.getElementById("userId").value;
var url = "user_validate.jsp?userId=" + userId + "&timestampt=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}

Server处理方式

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ page import="com.bjsxt.drp.sysmgr.*" %>
<%
/*
//可以采用清除缓存的方法，如下
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); 
*/


String userId = request.getParameter("userId");
if (UserManager.getInstance().findUserById(userId) != null) {
out.println("用户代码[" + userId + "]已经存在!");
}
%>

3，jquery--AJAX

 $.ajax()：封装了基本的AJAX操作，并且可以通过传递不同的参数完成业务逻辑处理

 $.get()：用于简化$.ajax, 直接采用get方式异步提交数据

 $.post()：用于简化$.ajax, 直接采用post方式异步提交数据

 JSON : {“usercode”:”123”, “username”:”456”}, 属性的名称使用双引号声明，否则识别不了