Ajax学习笔记之一----------第一个Ajax Demo[转载]
原文地址： http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html
一。核心推动力：XMLHttpRequest对象
XMLHttpRequest对象在javascript 中创建并使用，客户端可以仅仅从服务器端获取它需要的信息：通过与DOM和CSS的 结合，就可以实现局部刷新的效果；同时还可以通过XMLHttpRequest对象异步提交 信息，将用户的输入在后台提交到服务器所在而无需刷新这个页面。 XMLHttpRequest催生了Ajax概率的诞生，称它是Ajax的核心推动力毫不为过。
XMLHttpRequest对象主要的属性与方法：
| 方法 | 描述 |
| abort() | 终止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应头部作为键/值对返 回给客户端 |
| getResponseHeader("header") | 返回指定 头部信息字符串 |
| open("method", "url",true) | 建立与 服务器的连接。method参数可以是GET、POST或PUT,GET一般用于读取数据的情况， POST一般则是用于修改服务器资源的情况。url参数可以是相对URL或绝对URL。true 是指定异步读取服务器资源,false则相反 |
| send(param) | 向服务器发送请求。param参数是向服务器发送的参数，格式 如："city=beijing"。不过参数一般都在open方法的url参数中传递 |
| setRequestHeader("header", "value") | 把指定头部设置为所提 供的值。在设置任何头部之前必须先调用open() |
| 属性 | 描述 |
| onreadystatechange | 请求的状态改变时都会触发这个事件处理器，通 常会给这个属性指定一个回调函数。在这个回掉函数里面根据状态的不同进行相应 的操作。 |
| readyState | 请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成 |
| responseText | 服务器的响应，返回字符串 |
| responseXML | 服务器的响应，返回XML对象。 |
| status | 服务器的HTTP状态码（200对应OK，404对应Not Found（未找 到）....） |
| statusText | HTTP状态码的相应文本（OK或 Not Found（未找到）等等） |
二。还是来个实际点吧， 看个例子。
1。新建一个空网站，AjaxWeb。添加页面 Default.aspx,Default.aspx源码如下：
1 <body>
2 <form id="form1" runat="server">
3 <table>
4 <tr>
5 <td colspan="2" align="center">
6 Ajax实现局部刷新
7 </td>
8 </tr>
9 <tr>
10 <td>
11 填写城市名称：
12 </td>
13 <td>
14 <input id="txtCityName" type="text" />
15 </td>
16 </tr>
17 <tr>
18 <td>
19 </td>
20 <td>
21 <input type="button" value="查询" onclick="getData();" />
22 </td>
23 </tr>
24 <tr>
25 <td>
26 选择区域列表：
27 </td>
28 <td>
29 <select id="selAreas">
30 </select>
31 </td>
32 </tr>
33 </table>
34 </form>
35 </body>
2。js代码
1 <script language="javascript" type="text/javascript">
2 var xmlhttp;
3 function getData() {
4 var city = document.getElementById("txtCityName").value;
5 //IE
6 if (window.ActiveXObject) {
7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
8 }
9 //FireFox
10 else if (window.XMLHttpRequest) {
11 xmlhttp = new XMLHttpRequest();
12 }
13 xmlhttp.onreadystatechange = statechange;
14 xmlhttp.Open("POST", "datapage.aspx?city=" + city, true);
15 xmlhttp.Send();
16 }
17
18 function statechange() {
19 if (xmlhttp.readystate == 4) {
20 if (xmlhttp.status == 200) {
21 FillData(xmlhttp.responseText);
22
23 }
24 }
25 }
26
27 function FillData(strcity) {
28 document.getElementById("selAreas").options.length = 0;
29 var strcitys = strcity.toString().split(',');
30 for (var i = 0; i < strcitys.length; i++) {
31 document.getElementById("selAreas").add(new Option(strcitys[i], strcitys[i]));
32 }
33 }
34 </script>
这 段js在IE中运行正常，但是在FireFox里测试存在几个问题：
xmlhttp.Open is not a function：Open改成open就可以了，这是因为IE中区分大小写没那么严格 ，但是FireFox是严格区分大小的。所以为了js代码能更好的兼容各种浏览器，最好 区分大小写。
xmlhttp.Send is not a function：同上一个错误一样，将 Send改成send即可。
xmlhttp.readystate is undefind：类似错误， readystate应该为readyState
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://localhost:4761/AjaxWeb/Default.aspx :: FillData :: line 38" data: no]：
这个错误的原因是 document.getElementById("selAreas").add(new Option(strcitys[i], strcitys [i]))中的add方法不是通用方法，应该改成：document.getElementById ("selAreas").options.add(new Option(strcitys[i], strcitys[i]));
3。还 有一个页面：datapage.aspx,源码就一句：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="datapage.aspx.cs" Inherits="datapage" %>
注意：datapage.aspx必须将上句代码下的源码全部删除，否则会服务器会 将整个页面的源码发送给客户端，而不是我们所需要的结果。
后台代码：
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 string city = Request.QueryString["city"];
4 Response.Clear();
5 switch (city)
6 {
7 case "beijing":
8 Response.Write("朝阳,海淀,东城,西城");
9 break;
10 case "shanghai":
11 Response.Write("浦东,静安,虹口,徐汇");
12 break;
13 case "jinan":
14 Response.Write("历下,历城,市中,天桥");
15 break;
16 }
17 }
至此，通过XMLHttpRequest对象实现无刷新的功能全部完成。
jQuery的Ajax方法简单实现
1 function FillDataByJquery() {
2 $("#selAreas").empty();
3 var city = $("#txtCityName").val();
4 $.ajax({
5 type: "Post",
6 url: "datapage.aspx",
7 data: "city=" + city,
8 dataType: "text",
9 success: function (ret) {
10 if (ret.length > 0) {
11 var strcitys = ret.toString().split(',');
12 for (var i = 0; i < strcitys.length; i++) {
13 document.getElementById("selAreas").options.add(new Option(strcitys[i], strcitys[i]));
14 }
15 }
16 }
17 });
18 }
Ajax学习笔记之一----------第一个Ajax Demo[转载]的更多相关文章
- ajax学习笔记(原生js的ajax)
ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...
- AJAX学习笔记——jQuery中的AJAX
用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...
- Ajax学习笔记2之使用Ajax和XML
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...
- WCF学习笔记——Day1：一个WCF demo
Visual Studio2017,使用IIS托管.文中涉及一些WCF的基本概念,e.g.服务契约.托管等.可以先阅读<WCF服务编程>第一章. 1.新建一个WCF服务库(WCF Serv ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- C#.NET学习笔记2---C#.第一个C#程序
C#.NET学习笔记2---C#.第一个C#程序 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com 6.第一个C#程序: ...
- Spark学习笔记1——第一个Spark程序：单词数统计
Spark学习笔记1--第一个Spark程序:单词数统计 笔记摘抄自 [美] Holden Karau 等著的<Spark快速大数据分析> 添加依赖 通过 Maven 添加 Spark-c ...
- Unity3D学习笔记2——绘制一个带纹理的面
目录 1. 概述 2. 详论 2.1. 网格(Mesh) 2.1.1. 顶点 2.1.2. 顶点索引 2.2. 材质(Material) 2.2.1. 创建材质 2.2.2. 使用材质 2.3. 光照 ...
随机推荐
- Python基础之 一 字典(dict)
字典:是一种key - value的数据类型.语法:info = { key:value }特性:无序,key必须唯一(所以天生去重) 方法如下:del dict[key]:删除字典指定键len(di ...
- ThinkPHP3.2 点击看不清刷新验证码
欢迎使用Markdown编辑器写博客 baidu了一下.发现没有可用的源码,自己想了想,以下的方法可行. <!DOCTYPE html> <html> <head> ...
- C#使用全局钩子(hook)，SetWindowsHookEx返回0、不回调的解决
http://www.csharpwin.com/csharpspace/3766r5747.shtml 在.net 2005平台下 在使用全局hook时,总是遇见SetWindowsHookEx的返 ...
- javascript statically scope
在javascript 里面, 函数中使用的未定义的变量,会默认变为全局的变量. 而通过 var 这个关键字定义的变量,就是局部变量. As far as the output is concerne ...
- 六度分离（floyd算法,SPFA算法,最短路—Dijkstra算法）
Time Limit : 5000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submission(s) ...
- Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序
Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序 C#原本是用来编写Windows以及Windows Phone的应用程序.自从Xamarin问世后.C#的作用就发生了非常大的变化 ...
- Python extensions for Windows
Python extensions for Windows pywin32 214 Python extensions for Windows Maintainer: Mark Hammond Hom ...
- 【OI】单调队列
所谓单调队列,就是一个保持着某种性质的队列,通常是队列从队头到队尾,维护一种递增递减的关系. 这种队列通常用来解决一些连续区间的最值问题. 这种队列的入队要保证符合当前的性质,例如一个递增的单调序列( ...
- windows console Kill PID 端口查看
开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...
- Hierarchyviewer定位Android图片资源的研究
之前就在研究能否通过Hierarchyviewer找到所有所见的资源 在导入Hierarchyviewer之后才发现绑定在View上的drawable与实际的图片资源之间并没有维系着一个固定的对应关系 ...