您的位置：首页 > Web前端 > JQuery

锋利的jQuery读书笔记---jQuery中Ajax--load方法

2015-01-13 20:29 423 查看
第一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航