ajax异步处理等方法

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

主要步骤

1.首先创建对象

var xmlhttp;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2.客户端发送请求

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

使用open

xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();

使用get方法

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();

3.服务端接收响应

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i

txt=txt + x[i].childNodes[0].nodeValue + "
";

} document.getElementById("myDiv").innerHTML=txt;

4.验证账户密码异步处理

后台在不刷新整个页面的情况下,单刷新局部请求,用户仍可继续操作

function showCustomer(str) {

var xmlhttp; if (str=="") {

document.getElementById("txtHint").innerHTML=""; return;

} if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

; } xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

} } xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true); xmlhttp.send()

; }

1.Ajax原生版

function checkUser(username) {

//获取用户名的值

var uname = $(username).val();

//使用ajax异步验证该用户名是否被注册

//1.创建xmlhttprequest对象

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//2设置回调函数

xmlhttp.onreadystatechange=function(){

if(xmlhttp.status==200&&xmlhttp.readyState==4){

$("#checkuser").html(xmlhttp.responseText);   

}}

//3.open()

var url="UserServlet.htm?username="+uname;

xmlhttp.open("get", url, true);

//4send

xmlhttp.send();}

Servlet服务器

response.setContentType("text/html; charset=UTF-8");

// 取

String username = request.getParameter("username");

PrintWriter pWriter = response.getWriter();

System.out.println("username:" + username);

if ("admin".equals(username)) {

pWriter.write("该用户已被注册");

} else {

pWriter.write("放心注册");

}

pWriter.flush();

pWriter.close();

 

2.Juery实现Ajax

$.ajax({

url : "UserServlet.htm",

type : "get",

data : {

"username" : uname

},

dataType : "text",

success : function(data) {

$("#checkuser").html(data);}

});

3.Json实现

第一种:var user = {

"id" : "001",

"username" : "kevin",

"pwd" : "88888"

};

$(function() {

$("#json").html(

"

• 编号：" + user.id + "
• 用户名：" + user.username

  + "

• 密码：" + user.pwd + "

");

});

第二种:

$(function() {

//1定义json的普通数组

var country=["大中国","小日本","韩国棒子"];

//2将 json数组转为jquery对象

$(country).each(function(i){

      $("#country").append('+i+'" >'+this+'');

});

});

3:Json表示对象数组 动态添加到table\

$(function() {

//1定义json的普通数组

var country=["大中国","小日本","韩国棒子"];

//2将 json数组转为jquery对象

$(country).each(function(i){

      $("#country").append('+i+'" >'+this+'');

});

});