1，Ajax介绍
1，什么是Ajax
1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。
2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4、AJAX 可以使网页实现异步更新
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
2、Ajax同步与异步的区别
我们在使用 ajax 一般都会使用异步处理。
异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步是在一条直线上的队列，异步不在一个队列上 各走各的
jquery 的 async:false,这个属性
默认是true：异步，false：同步。
2，Ajax实例
一个小型的 AJAX 应用程序:
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
3， Ajax语法
(1)、XHR创建对象
1、XMLHttpRequest 是 AJAX 的基础。
2、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
3、XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}(2)、向服务器发送请求
1、如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
| 方法 |
描述 |
| open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) |
将请求发送到服务器。
|
2、GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
（1）、无法使用缓存文件（更新服务器上的文件或数据库）
（2）、向服务器发送大量数据（POST 没有数据量限制）
（3）、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
(3)、服务器响应
$如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4，Ajax的onreadystatechange 事件
(1)、什么是onreadystatechange事件
1、当请求被发送到服务器时，我们需要执行一些基于响应的任务。。
2、每当 readyState 改变时，就会触发 onreadystatechange 事件。
3、readyState 属性存有 XMLHttpRequest 的状态信息。
(2)、XMLHttpRequest 对象的属性
| 属性 |
描述 |
| onreadystatechange |
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| Xmlhttp.readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| Xmlhttp.status |
200: "OK" |
5，jQuery Ajax介绍
(1)、什么是 AJAX？
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
(2)、关于 jQuery 与 AJAX
1，jQuery 提供多个与 AJAX 有关的方法。
,2，通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。
6，jQuery load() 方法
1、什么是load() 方法？
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
2、load() 方法回调？
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});7，jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
GET 基本上用于从服务器获得（取回）数据。
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data +
最低0.47元/天 解锁文章
3370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
