在ajax中六大类型,Ajax初探

本文初始编辑地址，源自我的 CSDN 博客：我的 CSDN 博客

Ajax 初探

1.环境搭建与配置

这两天在捣鼓 Ajax,期初用的都是开发工具自己集成的 apache 服务器，但是因为我太蠢，找不到相关的设置项和说明，又或者是我懒得找把，于是搜了一款数据库和Apache服务器集成好的本地站点包：【XAMPP】，百度下载好，按照相关说明进行配置。

2.基本设置与文件索引目录

这里写图片描述

如图所示，只需要将 Apache 与 MySQL 打钩，并且 star，就 OK。

打开浏览器，输入站点 ip 与端口(默认是 127.0.0.1)

然后在安装目录下的,安装盘:xampphtdocs 看到有个.html 的文件，该就是刚才在浏览器中看到的。

可以将这个.html 的文件删除，刷新浏览器，可以直接看到浏览器中的目录索引。

这里写图片描述

现在网页上 127.0.0.1 的目录就是文件库中的映射。

以后我们可以将服务器端需要响应的 asp/php/txt 文件，都放在 安装盘:xampphtdocs下即可，环境搭建完成。

3.喜闻乐见敲代码环节

3.1 javascript 原生 Ajax所谓Ajax：

A:async 异步加载

ja: javascript 脚本语言

x:xml 前后台通信的数据载体，文本

(鉴与json的出现，XML正在被逐渐取代，大有"Ajaj"的趋势)

3.2 目的

目的是为了提高用户体验，更新局部数据时不用刷新整个网页，就可以完成数据交互。

3.3 对象 (API)

1. 在 IE7+/Chrome/Opera/Safari 中，对象为 XMLHttpRequest，该对象属于 window 下的子对象;

创建方法为

1

var xhr = new XMLHttpRequest;

2.在 IE7 以下， 对象为 ActiveXObject,该对象属于 window 下的子对象;

创建方法为

1

2

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

//括号中的必须有。

3.4 浏览器兼容判断1

2

3

4

5

6

7

8

9

10

var xhr =; //var 一个空对象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest;

} //非IE7以下

else if(window.ActiveXObject){

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}//IE7以下

else{alert("您的浏览器过于先进，请降级到合适的版本！")}

3.5 方法

这个 xhr 对象，自带了一些方法。

1.open(规定请求的类型，地址，是否异步)方法

1

xhr.open(method,url,async)

2.send(string) 方法，用于发送请求

该方法中的 string，只要在 method=” post” 时，才可以使用。

3.当 method==true,那么要设定就绪时执行的函数，跟回调函数有点像:

先说两个属性：

(1) xhr.responseText //······························· 返回字符串形式的相应数据

(2) xhr.responseXML //································ 返回 XML 形式的相应数据

1

2

3

4

5

6

7

8

9

10

11

xhr.onreadystateChange=function{

if(xhr.readystate==4&&xhr.status==200){

//这里写下要回调的方法

document.getElementById('div').innerHTML=xhr.responseText;

//获取返回的文本，这里也可以写xhr.responseXML

}

}

xhr.open('get','123.php',true);

xhr.send();

OK,这是默认的异步处理，要执行一个就绪时的函数。

那么，在同步模式下，即 async=false 时，应该这么写请求：

xhr.open(“GET”,”/try/ajax/ajax_info.txt”,false);

xh.send();

document.getElementById(“Div”).innerHTML=xhr.responseText;

3.6 onreadystatechange 存储函数

onreadystatechange 存储着 xhr 的好几种状态：

0：初始化未就绪 (想找老板要工资，但没准备好)

1：已经与服务器连接(已经走进老板办公室)

2：服务器已经接受(老板已经听到你的诉求)

3：正在处理请求(老板在苦思冥想给不给你钱)

4：请求已经完成，并且响应也已经下发(想了半天给你了)

每当 readyState 改变时，就会触发 onreadystatechange 事件。

同时，status 也需要有响应的返回值，从服务器传递回来，有两个值：

200 响应就绪，成功下发(会计接到老板的电话，立马爽快的给了你工资)

404 未找到(会计跑路了，尽管老板同意，你还是没拿到钱)

觉得文章有用？点击下方打赏，鼓励作者更好的写作！