Ajax作用、及Ajax函数的编写

来源：互联网发布：淘宝店铺设置流程编辑：程序博客网时间：2024/06/11 11:59

关于Ajax 指的是异步 (Asynchronous javaScript and XML) <异步的javascript和XML>

1、 Ajax并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术

2、 Ajax并不是最新的编程语言，而是一种使用现有标准的新方法它用于创建更好更快以及交互性更强的 Web 应用程序的技术。

3、 Ajax是能在不重新加载整个页面<无需刷新！>的情况下,能与服务器交换数据并更新网页内部分内容.

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术.简而言

之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户(不必造成重新加载页面便与WEB服务器

交换数据可以让网页从后台服务器请求少量的信息而不是加载整个页面)使得因特网的应用程序更加小,速度更快,更加友好，同时需

要注意的是Ajax是被所有主流浏览器支持的，而且Ajax程序独立于浏览器和平台。

Ajax 的异步(无阻断 )和同步(阻断一步一步进行上一步没有完成下一步就不继续)

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。

Ajax适合使用的应用场合有

*使用Ajax进行数据验证(用户登录名和密码是否正确和唯一性)

优点:不像传统的验证数据需要填写完数据后向后台服务器提交表单数据,进入到服务器端进行验证,整个过程时间长且对后台服务器

造成不必要的负担当使用了Ajax技术是直接由XMLHttpRequest对象发出验证请求，根据返回的HTTP 响应判断验证的数据是

否符合，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，非常的快速且不增加服务器的负担。

*使用Ajax更新页面的部分内容在无需刷新的情况下 , 可更新多条甚至是版块的内容，如股票的更新如百度搜索无需确定只需要

在搜索框写入搜索的内容下方变自动更新内容 <减少向服务器的请求>

*网页小游戏(联网的)、新浪微博、Google 地图、开心网.

服务器：能提供一定服务的特殊电脑.ftp、svn、web

网页浏览过程分析：请求到服务器读取返回数据下载到本地浏览器看到
如何配置自己的服务器程序（wamp）
安装一个wamp集成环境，因为Ajax是读取服务器上面的信息的，所以我们接下来的页面需要保存到www目录下：比如我创建一个文件aa.html放到该目录下。我可以通过浏览器输入下面的信息找到这个文件:

loclhost/aa.html

127.0.0.1/aa.html

使用Ajax

基础：请求并显示静态TXT文件

字符集编码

缓存、阻止缓存

动态数据：请求JS（或json）文件

eval的使用

DOM创建元素

局部刷新：请求并显示部分网页文件

HTTP请求方法
GET——用于获取数据（如：浏览帖子）：不安全，放到url里面传递信息，通过网址传递.容易出错.因为有大小限制：4-10k,有缓存只能传输字符串

POST——用于上传数据（如：用户注册）：稍微安全一些，不通过网址url，可以传大文件，2G，没有缓存

GET、POST的区别

get是在url里传数据：安全性没有post好、容量限制、并且浏览器本地有缓存

编写Ajax函数的步骤:

1、创建Ajax对象

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()

2、连接服务器（打开和服务器的连接）open('方法','url',异步处理)

open(方法, 文件名, 异步传输)

同步和异步

3、发出请求

send()

4、接收返回

请求状态监控

onreadystatechange事件：当状态码改变时触发 :on readystate change

readyState属性：请求状态

0 （未初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

status属性：HTTP状态码请求结果服务器端的状态找到成功返回>200 未找到错误返回:>404

lresponseText ：请求到的文本,字符串

封装的js代码如下:

// 封装ajax()方法function ajax(url,fnSucc,fnFaild){//1、创建Ajax 对象if(window.XMLHttpRequest){var oAjax=new XMLHttpRequest();                     //声明 兼容除IE6外  所有主流浏览器}else{var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //声明 兼容IE6   内置的 微软的 插件}//2、连接服务器(打开连接服务器)//  open(method,url,async)//  method ：请求的类型；GET 或 POST//  url ：文件在服务器上的位置//  async ：true（异步）或 false（同步）oAjax.open('GET',url,true);//3、发送请求oAjax.send();//4、接受请求oAjax.onreadystatechange=function (){          //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。/** readyState状态含义 *  0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 */if(oAjax.readyState==4){/** status状态含义200: "OK"    成功404: 未找到页面  出错 */if (oAjax.status==200) {//alert('成功了！'+Ajax.readyState);   //responseXML  获得 XML 形式的响应数据。fnSucc(oAjax.responseText);          //responseText 获得字符串形式的响应数据。} else{//alert('失败了');if(fnFaild){fnFaild}}}};}

ajax(url,fnSucc,fnFaild)函数参数介绍：
url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild:失败返回信息

HTML页面使用方法代码如下:

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script src="ajax.js"></script><script>window.onload=function (){var oBtn=document.getElementById('btn1');oBtn.onclick=function (){  //阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数//第二种阻止缓存方法: 声明全部变量num = 0; 在路径后面加'aaa.txt?='+(num++) 递归ajax('aaa.txt?t='+new Date().getTime(), function (str){alert(str);}, function (){alert('失败');});};};</script></head> <body><input id="btn1" type="button" value="读取" /></body></html>

上面是获取txt里面内容的，如果想获取数组和json的内容。方法如下：ajax读取的到的都是字符串，要用函数eval()函数
读取数组：

[1,2,3,4,5,6,7]

<script src="ajax.js"></script><script>window.onload=function (){var oBtn=document.getElementById('btn1');oBtn.onclick=function (){ajax('arr.txt?t='+new Date().getTime(), function (str){var arr=eval(str); //eval  eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。alert(arr[3]);     //数组加下标}, function (){alert('失败');});};};</script>

读取json：

[{a: 5, b: 7}, {a: 8, b: 12}]

<script src="ajax.js"></script><script>window.onload=function (){var oBtn=document.getElementById('btn1');oBtn.onclick=function (){ajax('arr2.txt?t='+new Date().getTime(), function (str){var arr=eval(str);alert(arr[0].a); //数组的下标  点a是代表下标里面的变量名  那个变量的值}, function (){alert('失败');});};};</script>

<案例>读取的json放大ul里面：

[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script src="ajax.js"></script><script>window.onload=function (){var oBtn=document.getElementById('btn1');var oUl=document.getElementById('ul1');oBtn.onclick=function (){ajax('data.txt?t='+new Date().getTime(), function (str){var arr=eval(str);for(var i=0;i<arr.length;i++){var oLi=document.createElement('li');oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';oUl.appendChild(oLi);}}, function (){alert('失败');});};};</script></head> <body><input id="btn1" type="button" value="读取" /><ul id="ul1"></ul></body></html>

传统开发模式: (不使用 Ajax) 如果需要更新内容，会触发一次返回服务器HTTP的请求必需重载整个网页面服务器做出处理后，返回一个html页面给用户

Ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。

如下是对比图:

1 0