AJAX技术

来源：互联网发布：软件开发面试题编辑：程序博客网时间：2024/05/22 10:53

AJAX技术

1,什么是AJAX;

AJAX：Asynchronous javascript and xml

异步：异步请求后，不等返回结果，由回调函数处理结果

Javascript:向服务器发起请求，获取返回结果，更新页面；

Xml:封装数据；

用途：是只刷新局部网页的技术，这意味着可以在不重新加载整个网页的情况下，对网页的某些部分进行更新

2，Ajax的优势和劣势

优势：a,不需要插件支持

b,优秀的用户体验

c,提高web程序的性能

d,减轻服务器和带宽的负担；

劣势：

a,浏览器对XMLHTTPRequet对象的支持度不足；

b,破坏浏览器前进，后退按钮的正常功能

c,对搜索引擎支持不足

d,开发和调试工具欠缺；

3,AJAX技术的组成：

a,DOM

b,Javascript

c,css

d,XMLHTTPRequest

4，XMLHTTPRequest对象

是ajax技术的核心，通过使用该对象，web开发者可以做到在页面已加载后从服务器更新页面；

XMLHTTPRequest对象运用到的属性：

Onreadystatechange:当属性改变时就会调用该函数:

readyState:存有XMLHTTPRequest的状态，从0到4发生变化：（0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已完成，且响应已就绪）

Status:返回HTTP协议的状态码（如：200表示OK，404表示未发现）；

responseText:获得字符串形式的响应数据，如果来自服务器的响应并非XML,,就使用该属性：

ResponseXML:获得XML形式的响应数据，如果来自服务器的响应是XML,而且需要作为XML对象进行解析，就使用该属性；

stateText:服务器返回的状态文本信息：

XMLHTTPRequest对象运用到的方法：

Abort() :用它来停止当前请求；

Open(“请求的类型”，”URL”，async) :请求的类型有：POST（使用POST的情况：a,无法使用缓冲文件，b,像服务器发送大量数据，c,发送包含未知字符的用户输入时，POST比较稳定与可靠）或者GET（大部分情况下都使用GET,GET更简单也更快）,URL是指文件在服务器上的位置 ,async是指是否异步处理（true表示异步处理，false是指同步）

注：1,使用get方法时，为避免产生一个缓存结果，可以在URL上加上一个唯一的ID.（如：xmlhttp.open(“GET”,”data.text” +Math.random(),true)）

2,如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头，然后在send方法中规定您希望发送的数据(如：

xmlhttp.open(“POST”,”data.text”,true);

xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urllencoded”)

Xmlhttp.send(“fname = Bill&lname=Gates”))；

Send(string):将请求发送到服务器（string:仅用与POST请求）

5，如何使用XMLHTTPRequest接收和发送数据；

步骤：1，创建XMLHTTPRequest对象，并进行初始化；

2，发送请求

3，服务器接收请求进行处理

4，返回响应数据

5，客户端接收

6，依据响应数据修改客户端页面内容

详细例子：

<html>

<head>

function display()

{

var g_xmlhttp ;

//判断浏览器的版本

if(window.XMLHttpRequest)

{

g_xmlhttp = new XMLHttpRequest();

}

else if(window.ActiveXObject)

{

g_xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

g_xmlhttp.onreadystatechange =function()

{

if(g_xmlhttp.readyState == 4 && g_xmlhttp.status == 200)

{

document.getElementById("ptext").innerHTML = g_xmlhttp.responseText;//服务器获取请求做处理

}

else

{

return false;

}

g_xmlhttp.open("GET","data.txt",true);//打开文件

g_xmlhttp.send();//发送请求

}

</script>

</head>

<body>

<form>

<div id = "ptext"><h3>before change !</h3></div>

<input type = "button" value = "button" onclick = "display()"/> //此处不能使用submit,因为submit会进行提交，会重新刷新整个界面

</form>

</body>

</html>

0 0