织梦Ajax技术入门教程

最新推荐文章于 2021-08-06 18:15:16 发布

simon803

最新推荐文章于 2021-08-06 18:15:16 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： ajax javascript xmlhttprequest function mozilla null

本文链接：https://blog.csdn.net/simon803/article/details/1906647

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文根据柏拉图文章整理。

Ajax这个名称怎么来的，本人也不得而之了，大概是（Active Javascript Action Xml）吧，说白一点就是运用了 javascript、xmlhttp和xmldom技术及网站后台来处理用户的一些操作的方法吧。

那么本人就分三步来说明如何使用 Ajax 技术来做开发。

一、用 javascript 操作 xmlhttp 对象

二、服务器部对xmlhttp请求的响应（PHP范例）

三、xmldom 的使用方法

那费话少讲，先说第一部份：

一、用 javascript 操作 xmlhttp 对象

IE7, Mozilla ,Firefox等浏览器中，javascript是内置有 XMLHttpRequest 这个对象的，但IE5+则没有，需要用如下方法来启动：
//IE 6
try{ xhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch(e){ ; }
//IE5+
if(xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch(e){ ; }

那考虑不同浏览器的兼容，启动一个xmlhttp一般都要按如下方式：

var xhttp = null;

if(window.XMLHttpRequest){ //IE7, Mozilla ,Firefox 等浏览器内置该对象

xhttp = new XMLHttpRequest();

}else if(window.ActiveXObject){ //IE6、IE5

try{ xhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e){ ; }

if( xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){; }

}

对于 xmlhttp 的使用，一般遵守如下的顺序：

1、初始化 xmlhttp 对象（上文）；

2、打开链接

方法
xhttp.open("GET", purl, true);

参数一：用 GET 或 POST 方式发送数据

参数二、请求网址（只能请求你服务器上的资源，一般浏览器安全限制不能读取跨域的数据）

参数三、true 表示异步传输（服务器返回信息完成前，你可以进行其它操作），false 表示阻断方式的传输。

3、设定要发送的 http 请求头

方法：

xhttp.setRequestHeader(key,value);

一般来说，默认要发送的头是：
xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

这种表示发送的内容类型的请求头用于发送文本数据，而且javascript默认是以unicode发送的

还有另外一种形式是：
xhttp.setRequestHeader("Content-Type","multipart/form-data");

是表示发送二制形式的数据，由于安全性原因，javascript一般不能用这种方式来发送数据，所以这个头一般没什么用。

如果你的网站开启了使用 refer 参数来防盗链，那么你必须用这个方法指定 Refer 参数，或者如果用户需要登录才能进行某操作，那么要指定 Cookie 的请求头。

4、send 数据

方法：xhttp.send(postdata);

对于用 get攻手请求，不需要指定postdata，直接用 test.php?a=a&b=b 这样形式的网址来请求即可。

如果是post方式，需要用 key1=value2&key2=value2 这样的形式来对数据进行处理，把它合并在 postdata 字串中，然后发送。

注意事项：

javascript默认发送数据的方式是unicode，处理返回的数据必须是utf-8格式，因此，在发送的时候，需要用escape()函数来处理postdata和网址的value，在服务器上必须还原这些value，并把unicode转为页面编码值，因此如果用 jsp 或 asp.net 都会比较简单，但如果用php处理起来是什么费劲的，等下会教你如何做。

5、确认服务器返回资料完成下载

[1] 如果用阻断的方式来发送请求，那么直接用 if(xhttp.readyState == 4)就能判断是否完成。

readyState 的具体属性值为：
0 没open
1 没send
2 状态未知
3 正在传送
4 传送完成

当然为了保障起见，还需要加多一重判断

就是 if(xhttp.status == 200)

status 就是 http 协议里的返回头代码

1xx 表示（唉呀，忘记了）
2xx 表示成功的信息
3xx 表示页面转移
4xx 页面不存在
5xx 表示服务器的各种错误

如果你的页面没特殊处理，一般用 if(xhttp.status == 200) 来确信内容返回是正确的

[2] 如果用异步传输，需要用 onreadystatechange 的事件来监听

xhttp.onreadystatechange = function()
{
//这里来进行上面阻断方式的判断
if(myajax.xhttp.readyState == 4){
if(myajax.xhttp.status == 200){
//要进行的后续操作
}
}
}

6、获取返回结果

属性：
[1]xhttp.responseBody;
[2]xhttp.responseStream;
[3]xhttp.responseXml;
[4]xhttp.responseText;

其中1、2都是二进制的方式，一般很少会用到，4不用看都知道了

如果服务端无意外的话[3]返回的是一个xmldom的对象

二、服务器部对xmlhttp请求的响应（PHP范例）

为了简化操作，在这里把 xmlhttp的各作操作封装为一个类

上面代码保存为： dedeajax.js

ok 那现在做个最简单的测试吧
test.htm

<script language='javascript' src='dedeajax.js'></script>
<script language='javascript'>
function WiteOK()
{
var myinfo = document.getElementById("myinfo");
if(myajax.xhttp.readyState == 4){
if(myajax.xhttp.status == 200){
myinfo.innerHTML = myajax.xhttp.responseText;
}
}
}
var myajax = new DedeAjax(WiteOK);
myajax.AddKey("key1","----------------------------");
myajax.SendPost("test.php");

</script>

<div id='myinfo'><div>

test.php
<?
header("Content-Type: text/html; charset=gb2312");
echo $_POST['key1'];
?>

看到了什么了呢？不用激动，真正让你头痛的东西还没有出来。

把类里面的

this.AddKey = function(skey,svalue){
this.keyCount++;
this.keys[this.keyCount] = skey;
this.values[this.keyCount] = svalue;//escape(svalue);
};

escape 屏蔽掉

发送
myajax.AddKey("key1","-----中---国----人-----");

看到什么了，乱码是吧？呵呵，这回开始头大了

先把 escape放回去
this.values[this.keyCount] = escape(svalue);

那么看到的就是
-----%u4E2D---%u56FD----%u4EBA-----

如何把 %u4E2D 这些东西弄回来呢？对于php而言这是一个很复杂的问题，如果用asp就简单多了

下面是我写的一个函数：

//unicode url编码转gbk编码函数
function Unicode2Gbk($str)
{
//载入对照词典
if(!isset($GLOBALS['GbkUniDic']))
{
$ds = file("./data/gbk_unicode.dic");
foreach($ds as $l){
$GLOBALS['GbkUniDic'][hexdec('0x'.substr($l,0,4))] = substr($l,5,4);
}
}
//处理字符串
$glen = strlen($str);
$okstr = "";
for($i=0; $i < $glen; $i++)
{
if( $glen-$i > 4){
if($str[$i]=='%' && $str[$i+1]=='u'){
$uni = hexdec('0x'.substr($str,$i+2,4));
if(isset($GLOBALS['GbkUniDic'][$uni])){
$uni = $GLOBALS['GbkUniDic'][$uni];
$okstr .= chr(hexdec(substr($uni,0,2))).chr(hexdec(substr($uni,2,2)));
}
else $okstr .= "&#{".hexdec("0x".$uni).";";
$i = $i+5;
}
else $okstr .= $str[$i];
}
else $okstr .= $str[$i];
}
return $okstr;
}

词典文件： http://www.ce86.com/myimg/data.rar

把test.php 输出改为

echo Unicode2Gbk($_POST['key1']);

正常了吧:lol:

以下说下面和xml有关的东西的了

三、xmldom 的使用方法

由于本文仅是牵针引线的作用，这一章就简单些，因为针对的是 php ，如果针对的是 asp.net 或 jsp 写涉及 web server 类的通信，已经不单纯是 ajax 的问题了，本章的任务是把

test2.php

<?
header("Content-Type: text/xml; charset=gb2312");
echo '<'.'?'."xml version=/"1.0/" encoding=/"gb2312/" ".'?'.">
<myhome>
<item sex=/"男/">我是小一</item>
<item sex=/"女/">我是小二</item>
</myhome>
";
?>

这个xml文档在客户端用自己的方式展现出来。

因为xml这种东西比较麻烦，所以语法也必须严格，test2.htm的页面的源码为

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ajax测试</title>
</head>
<body οnlοad="WiteLoadDocument()">
<script language='javascript' src='dedeajax.js'></script>
<script language='javascript'>
var myajax = new DedeAjax(WiteOK);
function WiteOK()
{
var myinfo = document.getElementById("myinfo");
var mydom = null;
myinfo.innerHTML = "以下是处理结果：<br/>";
if(myajax.xhttp.readyState == 4){
mydom = myajax.xhttp.responseXml;
alert(mydom);
}
}
function WiteLoadDocument()
{
myajax.SendGet("test2.php");
}
</script>
<div id='myinfo'><div>
</body>
</html>

在IE中测试一下，如果弹出的对话框是 [object] 就表示成功获得返回的xml的xmldoc了。

那下面是处理：

结果：

以下是处理结果：
我是：我是小一，我的性别是：男
我是：我是小二，我的性别是：女

OK，目的已经达到

simon803

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
织梦Ajax技术入门教程

本文根据柏拉图文章整理。Ajax这个名称怎么来的，本人也不得而之了，大概是（Active Javascript Action Xml）吧，说白一点就是运用了 javascript、xmlhttp和xmldom技术及网站后台来处理用户的一些操作的方法吧。那么本人就分三步来说明如何使用 Ajax 技术来做开发。一、用 javascript 操作 xmlhttp 对象二、服务器部对xmlhttp请
复制链接

扫一扫