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