ajax基础知识

Ajax基础知识

一、Ajax名词解释

AJAX： Asynchronous Javacript and XML

中文意思：异步Javascript和XML.指一种创建交互式网页应用的网页开发技术。（AJAX是一

种网页开发技术，主要用于创建交互式网页开发）

又不仅仅是一种单一的技术，而是有机的利用了一系列的相关技术：

简单理解为：Javascrip + XMLHttpRequest + CSS + 服务器端的集合

二、AJAX的优点：

1.0 Ajax在本质上是一个浏览器端的技术

2.0 Ajax技术主要目的在于局部交换客户端以及服务器之间的数据

3.0 Ajax这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的 Refresh wihtout Reload（轻刷新）

4.0 与服务器之间的沟通，完全是透过Javascript 来实行

5.0 使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就是让网络程式更像一个桌面应用程序

6.0 Ajax就是运用Javascript在后台悄悄帮你去服务器要资料，最后再由Javascript或DOM来帮你呈现结果，因为所有动作都是有Javascript代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

三、异步对象其中的readyState属性

readyState属性指出了XMLHttpRequest对象在发/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5中不同的状态

0：未初始化，new完后。

1：已打开。对象已经创建并初始化，但还未调用send方法

2：已发送。已经调用send方法，但该对象正在等待状态码和头的返回

3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头部完整

4：已加载。所有的数据接收完毕

四、Ajax的Get请求与Post请求

 1             //Ajax的Get请求
 2             //1.0 获取异步对象
 3             var xhr = new XMLHttpRequest();
 4             //2.0 设置参数
 5             xhr.open("get", "/A01_GetDate.ashx", true);
 6             //3.0 不使用缓存
 7             xhr.setRequestHeader("If-Modified-Since", "0");
 8             //4.0 设置回调函数
 9             xhr.onreadystatechange = function () {
10                 if (xhr.readyState == 4 && xhr.status == 200) {
11                     alert(xhr.responseText);
12                 }
13             };
14             //5.0 发送请求
15             xhr.send();

 1             //Ajax的Post请求
 2             //1.0 创建异步对象
 3             var xhr01 = new XMLHttpRequest();
 4             //2.0 设置异步对象的参数
 5             xhr01.open("post", "/yyy.ashx", true);
 6             //3.0 将传入的参数放入form中给服务器
 7             Xhr01.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 8             //4.0 设置回调函数
 9             xhr01.onreadystatechange = function () {
10                 if (xhr01.readState == 4 && xhr01.status == 200) {
11                     alert(xhr01.responseText);
12                 }
13             };
14             //5.0 发送请求
15             xhr01.send("name=jack&id=11");

案例：1

前台：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function GetTime() {
//1.0创建异步对象
var xhr = new XMLHttpRequest();
//2.0设置参数
// 请求方式请求路径是否异步
//xhr.open("get", "/P02GetData.ashx?id=" + Math.random(), true);
xhr.open("get", "/P02GetData.ashx", true);
//3.0
//3.1.0在路径后面加随机数（不推荐使用）
// 3.2.0不使用缓存
xhr.setRequestHeader("If-Modified-Since", "0");

//4.0设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
//5.0发送请求
xhr.send();

}
//readyState:有五个状态
//0：未初始化。new完后;
//1：已打开。对象已经创建并初始化，但还未调用send方法
//2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
//3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
//4：已加载。所有数据接收完毕

</script>
</head>
<body>
<img src="img/1.gif" /><br />
<input type="button" value="得到系统时间" onclick="GetTime()" />
</body>
</html>

后台

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace ajax始体验

{

/// <summary>

/// P02GetData 的摘要说明

/// </summary>

public class P02GetData : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.Write(DateTime.Now);

}

public bool IsReusable

{

get

{

return false;

}

posted on 2015-01-08 00:04 高达阅读(139) 评论(0) 收藏举报

刷新页面返回顶部

高达

ajax基础知识

导航

公告