标签:
原文地址: 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源码如下:
2。js代码
这 段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必须将上句代码下的源码全部删除,否则会服务器会 将整个页面的源码发送给客户端,而不是我们所需要的结果。
后台代码:
至此,通过XMLHttpRequest对象实现无刷新的功能全部完成。
jQuery的Ajax方法简单实现
Ajax学习笔记之一----------第一个Ajax Demo[转载]
标签:
原文地址:http://www.cnblogs.com/mokey/p/4465469.html