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

锋利的jQuery读书笔记---jQuery中Ajax--load方法锋利的jQuery（第2版）完整版PDF+源码 http://www.linuxidc.com/Linux/2013-10/91527.htm第一个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中的Ajax1.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>jQuery权威指南 PDF版中文+配套源代码 http://www.linuxidc.com/Linux/2013-10/91059.htmjQuery实战中文PDF+源码 http://www.linuxidc.com/Linux/2013-09/90631.htm《jQuery即学即用（双色）》 PDF+源代码 http://www.linuxidc.com/Linux/2013-09/90383.htm锋利的jQuery（第2版）完整版PDF+源码 http://www.linuxidc.com/Linux/2013-10/91527.htmjQuery完成带复选框的表格行高亮显示 http://www.linuxidc.com/Linux/2013-08/89406.htmjQuery基础教程（第4版） PDF 完整高清版+配套源码 http://www.linuxidc.com/Linux/2014-03/98162.htm--------------------------------------分割线 --------------------------------------jQuery 的详细介绍：请点这里
jQuery 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-03/129150.htm