初识AJAX技术

前端之家收集整理的这篇文章主要介绍了初识AJAX技术前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 简介:

AJAX(阿贾克斯),是一种网页开发技术。AJAX是异步的Javascript和XML的简写,是一种实现异步请求的技术。

为什么要使用AJAX?传统的页面刷新技术是重新加载整个页面,这样做有一个很大的缺点就是:如果只需要改变当前页面的一小部分内容,确重新加载整个页面,是很耗时间、效率的。AJAX就是为了实现部分网页刷新,在不用重新加载整个页面的情况下与服务器交换数据。

使用AJAX的优点是:节省带宽,提高响应速度。

使用AJAX也有缺点,最大的缺点就是可能让后退按钮失去作用。例如:在一个文本框里获得服务器数据后,就比之前的页面多了文本框里的数据,当我们点击他跳到下一个页面,返回时,希望还能看到文本框里的数据,但浏览器只能加载之前的静态页面,也就是看不到文本框里的数据了。解决方法是:使用一个隐藏的iframe来保存使用了AJAX技术元素的内容,当出现后退情况时,就报内容读取到对应的元素上,恢复上次的状态。

2. 使用AJAX技术:

AJAX的核心是XMLHttpRequest对象,使用该对象来与服务器交互,实现部分刷新的功能

注意:IE5,IE6使用的是ActiveXObject对象,而IE7+,FireFox等都是使用XMLHttpRequest对象。所以要创建一个XMLHttpRequest对象可以这样创建:

var xmlhttprequest;

if (window.XMLHttpRequest)

xmlhttprequest = newXMLHttpRequest();

else if (window.ActiveXObject)

xmlhttprequest = newActiveXObject("Microsoft.XMLHTTP");

else

alert("您的浏览器不支持AJAX技术");

2.1 XMLHttpRequest对象的四大属性

onreadystatechange属性为该属性指定一个函数指针。该函数会被异步调用,也就是当XMLHttpRequest对象的状态改变时会自动触发(当open()第三个参数为true时)

readyState属性保存了XMLHttpRequest的状态,根据这个值来判断处理。

·0: 请求未初始化

·1: 服务器连接已建立

·2: 请求已接收

·3: 请求处理中

·4: 请求已完成,且响应已就绪

status属性状态码,表示该响应的状态。如200表示OK,404表示Not Found。

responseText(responseXML)属性保存了服务器响应的数据。

2.2 AJAX如何向服务器提出请求:

使用XMLHttpRequest的open()和send()函数

open(method,url,async) :第一个参数表示提交报文的方式,可以是Get/Post,通常是用Get提交,Get的速度较快,但如果要提交的数据过大就必须采用Post方式。 第二个参数表示文件在服务器上的位置 第三个参数表示是否采用异步方式,通常都设置为true,设置为true,上面赋值给onreadystatechange属性函数才会异步执行;如果设置为false,则要等到服务器响应完成后才能执行其它操作。

Send(string) 参数是正对Post的,表示要提交给服务器的数据。、

如果要将string发送给服务器,还需要使用setRequestHeader(header,value)函数设置http报文的信息。

例如:

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded";

xmlhttp.send("fname=Bill&lname=Gates");

3. ASP.NET的一个小例子:

<head>
    <title>使用ajax技术实现部分网页刷新技术</title>
    <script type="text/javascript">
        function GetTime() {
            var xmlhttprequest;
            if (window.XMLHttpRequest)
                xmlhttprequest = new XMLHttpRequest();
            else if (window.ActiveXObject)
                xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
            else
                alert("您的浏览器不支持AJAX技术");

            xmlhttprequest.onreadystatechange = function () {   //异步执行,会触发几次
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                    document.getElementById("time").value =xmlhttprequest.responseText;
                }
            }
            xmlhttprequest.open("GET","AJAXResponse.ashx",true);
            xmlhttprequest.send();
    }
    </script>
</head>
<body>
<form name="form" action="AJAXResponse.ashx">
用户:<input type="text" name="user" onblur="GetTime()" /><br />
时间:<input type="text" id="time" name="time"/>
</form>
</body>
AJXXResponse.ashx的代码很简单,就是获得当前服务器时间并写入响应流中。

string strTime = DateTime.Now.ToString();
        context.Response.Write(strTime);
当user编辑框失去焦点时,time编辑框就会获得服务器端的时间。

使用HttpWatch观察,当user编辑框失去焦点后,服务器只给客户端发送时间,并不会再发送整个页面HTML代码

猜你在找的Ajax相关文章