前端基础进阶（一）Ajax技术应用
1. Ajax是什么？
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等。
2.AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准，并且联合使用它们：
-
XMLHttpRequest 对象 (异步的与服务器交换数据) -
JavaScript/DOM (信息显示/交互) -
CSS (给数据定义样式) -
XML (作为转换数据的格式)
var xhr;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else { // code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
（2）. 设置请求方式和请求地址
open函数需要3个参数，分别是请求方式，请求地址，是否异步，不建议将第三个参数设为false（毕竟用ajax是为了就为了异步）
xhr.open("get", "test.php", true);
（3）发送请求
xhr.send();
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(str);
str = "name=cheney&gender=secret";
（4）.监听状态变化
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
（5）.处理返回结果
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) {
console.log('请求成功');
}
else {
console.log('请求失败');
}
}
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<person>
<name>张三</name>
<age>18</age>
<sex>male</sex>
</person>
{"name":"张三","age":"18","sex":"male"}
obj = JSON.parse(xhr.responseText);
//第一步，创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
//第二步，注册回调函数
xmlHttp.onreadystatechange =callback1;
//{
// if (xmlHttp.readyState == 4)
// if (xmlHttp.status == 200) {
// var responseText = xmlHttp.responseText;
// }
//}
//第三步，配置请求信息，open(),get
//get请求下参数加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
//post请求下需要配置请求头信息
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，发送请求,post请求下，要传递的参数放这
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
}
//第五步，创建回调函数
function callback1() {
if (xmlHttp.readyState == 4)
if (xmlHttp.status == 200) {
//取得返回的数据
var data = xmlHttp.responseText;
//json字符串转为json格式
data = eval(data);
$.each(data,
function(i, v) {
alert(v);
});
}
}
//后台方法
private void GetAllComment(HttpContext context)
{
//Params可以取得get与post方式传递过来的值。
string methodName = context.Request.Params["methodName"];
//QueryString只能取得get方式传递过来的值。
string str1 = context.Request.Form["str1"];
//取得httpRequest传来的值，包括get与post方式
string str2 = context.Request["str2"];
List<string> comments = new List<string>();
comments.Add(methodName);
comments.Add(str1);
comments.Add(str2);
//ajax接受的是json类型，需要把返回的数据转给json格式
string commentsJson = new JavaScriptSerializer().Serialize(comments);
context.Response.Write(commentsJson);
}