第一个Ajax例子
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText"></div> </body> <script type="text/javascript"> function Ajax() { var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest对象 if(window.ActiveXObject) { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的 } else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象 xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest对象 } if(xmlHttpReq != null) { xmlHttpReq.open("GET", "test.jsp", true);//调用open()方法并采用异步方式 xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数 xmlHttpReq.send(null);//因为使用get方式提交，所以可以使用null参调用 } function RequestCallBack() {//一旦readyState值改变，将会调用这个函数} if(xmlHttpReq.readyState == 4) { if(xmlHttpReq.status == 200) { //将xmlHttpReq.responseText的值赋予id为resText的元素 document.getElementById("resText").innerHTML = xmlHttpReq.responseText; } } } } </script> </html>
test.jsp的内容：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%out.println("Hello Ajax!");%>
jQuery中的Ajax
1.load()
load()方法时jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中。
远程HTML代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="comment"> <h6>张三:</h6> <p class="para">沙发.</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地板.</p> </div> </body> </html>
load()载入HTML
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <style> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <title></title> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div class="comment">已有评论</div> <div id="resText"></div> </body> <script type="text/javascript"> $(function () { $("#send").click(function () { $("#resText").load("test.html"); }); }) /** * jQuery中的Ajax * * jQuery对Ajax操作进行了封装， * 在jQuery中$.ajax()方法属于最底层的方法， * 第2层是load()、$.get()、$.post()方法 * 第3层是$.getScript()和$.getJSON()方法 * * * load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。 * load(url [, data] [, callback]) * * url String 请求HTML界面的URL地址 * data(可选) Object 发送至服务器的key/value数据 * callback(可选) Function 请求完成时的回调函数，无论请求成功或失败 * */ </script> </html>
load()载入筛选后的HTML文档
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <style> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <title></title> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div class="comment">已有评论</div> <div id="resText"></div> </body> <script type="text/javascript"> $(function () { $("#send").click(function () { $("#resText").load("test.html .para"); }); }) /** * 筛选载入的HTML文档 * * load()方法的URL参数的语法结构为："url selector"，注意URL和选择器之间有一个空格 * * load()方法的传递方式根据参数data来自动指定。 * 如果没有参数传递，则采用GET方式进行传递； * 反之，则会自动转换为POST传递 * * **/ </script> </html>
load()方法---回调函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <style> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <title></title> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div class="comment">已有评论</div> <div id="resText"></div> </body> <script type="text/javascript"> $(function () { $("#send").click(function () { $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) { alert($(this).html()); alert(responseText);//请求返回的内容 alert(textStatus);//请求状态：success、error、notmodified、timeout alert(XMLHttpRequest);//XMLHttpRequest对象 }); }); }) /** * * load()方法的回调参数 * * **/ </script> </html>