XMLHttpRequest 对象使 AJAX 成为可能。
XMLHttpRequest
XMLHttpRequest 对象是 AJAX 的关键。
该对象在 Internet Explorer 5.5 与 2000 年 7 月发布之后就已经可用了，但是在 2005 人们开始讨论 AJAX 和 Web 2.0 之前，这个对象并没有得到充分的认识。
创建 XMLHttpRequest 对象
不同的浏览器使用不同的方法来创建 XMLHttpRequest
对象。
Internet Explorer 使用 ActiveXObject
。
其他浏览器使用名为 XMLHttpRequest
的 JavaScript 内建对象。
要克服这个问题，可以使用这段简单的代码：
var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
代码解释：
首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp
变量。把它的值设置为 null。
然后测试 window.XMLHttpRequest
对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。
如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest()
如果不可用，则检测 window.ActiveXObject
是否可用。在 I ......
XMLHttpRequest 对象是AJAX功能的核心，要开发AJAX程序必须从了解XMLHttpRequest 对象开始。
了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始，在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法：
先看看IE创建XMLHttpRequest 对象的方法(方法1)：
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//使用较老版本的 IE 创建 IE 兼容的对(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法(方法2)创建XMLHttpRequest 对象：
var xmlhttp = new XMLHttpRequest();
实际上Internet Explorer 使用了一个名为 XMLHttp 的对象，而不是 XMLHttpRequest 对象，而
Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者(下文统称 XMLHttpRequest
对象)。IE7开始也开始使用XMLHttpRequest 对象了。
在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错，并且无法使用该对象。所� ......
load(url[,data][,callback])------------->通常用来从WEB服务器上获取静态的数据文件
url: string类型 请求HTML页面的URL地址
data(可选): object 发送至服务器的key/value数据
callback(可选):function 请求完成时回调函数
例子：
主页面代码：
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, //test.html .para为test.html中.class为para的内容XMLHttpRequest){
alert( $(this).html() ); & ......
Ajax中send方法参数的使用
一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。
例如 ：
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);
此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如：
xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);
需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法。
......
刚开始学Ajax，看到很多网上的代码都用Get方法提交参数，Tomcat默认ISO编码实在是让人头痛，对付乱码我都是用过滤器做字符编码过滤的，Get方法过滤器监听不到，所以我一直喜欢使用Post方法，下面对Ajax Get和Post方法做一对比
GET：
<mce:script type="text/javascript"><!--
var xmlHttpRequest;
function createXMLHttpRequest(){
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpRequest=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
......
//ajax 获取数据
//脚本
var showResp=0;
function GetXmlHttpObject(handler)
{
var objXmlHttp = null;
if (document.all)//!window.XMLHttpRequest
{
// 创建IE中的XMLHttpRequest对象“XMLHTTP”
var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0",
"Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"];
for(var i=0; i<clsids.length && objXmlHttp == null; i++) {
objXmlHttp = new ActiveXObject(clsids[i]);
}
//如果objXmlHttp不为null，设定其执行成功时的回调函数。handler==CallbackMethod()
if (objXmlHttp != null)
{
objXmlHttp.onreadystatechange = handler;
}
}
else
{
// Mozilla | Netscape | Safari 等其它浏览器。
objXmlHttp = new XMLHttpRequest();
if (objXmlHttp != null)
{
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
}
}
return objXmlHttp;
}
var xmlHttp; //存放全局XMLHttpRequest对象。
function ExecuteCall(url,aa) //aa为element的id
{
try
{ ......
最新文章 : ajax