一、基本概念
Ajax:Asynchronous JavaScript and XML,异步JavaScript和XML。
二、Ajax应用
1、传统异步
//XMlHttpRequest
$("#send").click(function(){
var xmlHttpReq = null;
if(window.ActiveObject){
xmlHttpReq = new ActiveObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET","test.html",true);
xmlHttpReq.onreadystatechange = reqCallBack;
xmlHttpReq.send();
function reqCallBack(){
if(xmlHttpReq.readyState == 4){
$("#resText").html(xmlHttpReq.responseText);
}
}
});
2、load方法
// load(url,[data],[callback])
//无data参数为get,有data参数为post
$("#send1").click(function(){
$("#resText").load("test.html .param",function(responseText,textStatus,XMLHttpRequest){
alert(responseText + ";" + textStatus);
});
});
3、$.get()与$.post()方法
/**
* get(url,[data],[callback],[type])
* post(url,[data],[callback],[type])
* type:xml/html/script/json/text/_default
*/
$("#send2").click(function(){
$.get("getHtml.jsp",{
userName:"zang",
content:"ball"
},function(data,textStatus){
$("#resText").html(data);
//alert(data + ";" + textStatus);
});
$.post("getHtml.jsp",{
userName:"zang",
content:"ball"
},function(data,textStatus){
$("#resText").append(data);
//alert(data + ";" + textStatus);
});
});
// xml
$("#send3").click(function(){
$.get("getXml.jsp",{
userName:"zang",
content:"ball"
},function(data,textStatus){
var username = $(data).find("comment").attr("userName");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'><h1>" + username;
txtHtml += "</h1><p class='param'>" + content+"</p></div>";
$("#resText").html(txtHtml);
});
$.post("getXml.jsp",{
userName:"zang",
content:"ball"
},function(data,textStatus){
var username = $(data).find("comment").attr("userName");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'><h1>" + username;
txtHtml += "</h1><p class='param'>" + content+"</p></div>";
$("#resText").append(txtHtml);
});
});
// Json
$("#send4").click(function(){
$.get("getJson.jsp",{
userName:"zang",
content:"ball"
},function(data,textStatus){
var username = data.userName;
var content = data.content;
var txtHtml = "<div class='comment'><h1>" + username;
txtHtml += "</h1><p class='param'>" + content+"</p></div>";
$("#resText").html(txtHtml);
});
$.post("getJson.jsp",{
userName:"zang",
content:"ball"
},function(data,textStatus){
var username = data.userName;
var content = data.content;
var txtHtml = "<div class='comment'><h1>" + username;
txtHtml += "</h1><p class='param'>" + content+"</p></div>";
$("#resText").append(txtHtml);
});
});
注:以下都是全局方法
4、$.getScript()与$.getJSON()方法
/*
* getScript(url,callback)
* getJSON(url,callback)
*/
$("#send5").click(function(){
$.getScript("getScript.js",function(){
$("#resText").html("test getScript callback!");
});
$.getJSON("getJson.json",function(data){
$("#resText").append("getJson:" + data.userName + ";" + data.content);
});
});
5、$.ajax()方法
/**
* ajax()
* ajaxStart 不常用
* ajaxStop 不常用
*/
$("#send6").click(function(){
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
$.ajax({
type:"GET",
url:"getXml.jsp",
dataType:"html",
//global:false,
success:function(data){
$("#resText").html("ajax!");
}
});
});
6、序列化元素serialize()
$("#send1").click(function(){
$.get("getJson.jsp",$("#form1").serialize(),function(){
var username = data.userName;
var content = data.content;
var txtHtml = "<div class='comment'><h1>" + username;
txtHtml += "</h1><p class='param'>" + content+"</p></div>";
$("#resText").html(txtHtml);
});
});
----------------------------------------------------------------------------------------------------
getJson.jsp
<%@page import="java.io.*"%>
<%
PrintWriter fs = response.getWriter();
response.setContentType("application/json");
String username = (String) request.getParameter("userName");
String content = request.getParameter("content");
String result = "{\"userName\":\""+username+"\",\"content\":\""+content+"\"}";
fs.println(result);
fs.flush();
fs.close();
%>
getXml.jsp
<%@page import="java.io.*"%>
<%
PrintWriter fs = response.getWriter();
response.setContentType("text/xml;charset=UTF-8");
String username = (String) request.getParameter("userName");
String content = request.getParameter("content");
Thread.sleep(1000);
StringBuilder xml = new StringBuilder();
xml.append("<?xml version='1.0' encoding='UTF-8'?>");
xml.append("<comments>");
xml.append("<comment userName='" + username + "'>");
xml.append("<content>" + content + "</content>");
xml.append("</comment>");
xml.append("</comments>");
String info = xml.toString();
fs.println(info);
fs.flush();
fs.close();
%>
getHtml.jsp
<%@page import="java.io.*"%>
<%
PrintWriter fs = response.getWriter();
response.setContentType("text/html;charset=UTF-8");
String info = "";
String username = (String) request.getParameter("userName");
String content = request.getParameter("content");
info = "<div class='comment'><h1>" + username + "</h1><p class='para'>" + content + "</p></div>";
fs.println(info);
fs.flush();
fs.close();
%>
test.html
<!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> JQuery Ajax </title>
</head>
<body>
<div class="coment">
<h1>张三</h1>
<p class="param">板凳</p>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------