1.Ajax概述
1.Ajax：
Asynchronous JavaScript and XML(异步的JavaScript和XML)
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2.优点：
最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
3.使用：
Ajax 不需要任何浏览器插件，只需要用户在允许JavaScript的浏览器上执行。
2.Ajax工作原理
Ajax工作原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
XMLHttpRequest是Ajax的核心机制
3.XMLHttpRequest
1.创建XMLHttpRequest 对象
由于浏览器的不同，创建XMLHttpRequest的方式也不同
可以这样来判断
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.XMLHttpRequest 的属性
-
responseText
从服务器进程返回数据的字符串形式。 -
responseXML
来自服务器的响应是 XML，而且需要作为 XML 对象进行解析 -
onreadystatechange
请求发送到服务器，需要执行响应任务
当readyState发生改变时就会触发onreadystatechange事件 -
readyState
存有XMLHttpRequest的状态。从0-4发生变化
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理
4：请求已完成，且响应已就绪 -
status
从服务器返回的数字代码
eg：
200: "OK"
404: 未找到页面
3.XMLHttpRequest的方法
-
open(method,url,async)
规定请求的类型、url以及是否异步处理请求。
method：请求的类型；get，post
url：文件在服务器上的位置
async：true（异步）或 false（同步） -
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
一个例子说明上述属性及方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
//创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//onreadystatechange事件
xmlhttp.onreadystatechange=function()
{
//触发onreadystatechange事件的因素判断
//readyState的XMLHttpRequest状态为4(请求已完成，且响应已就绪)，并且status（服务器）返回200：OK；触发事件
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//从服务器进程返回数据的字符串形式。将值返回到id=myDiv的地方
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//规定请求的类型、url以及是否异步处理请求。
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
//将请求发送给服务器
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
4.jquery中的Ajax
$.ajax
-
url
发送请求的地址，默认为当前地址 -
type
请求方式(get,post)，默认为get -
data
向服务器发送的数据，要求类型是String或者Object类型 -
dataType
数据类型(text,json,script,xml,html……) -
success
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
- error
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
目前我用到的只有这些，后面会更新
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
网友评论