Ajax作用、及Ajax函数的编写

时间：2023-04-09 13:42:01

关于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代码如下:

  1. // 封装ajax()方法
  2. function ajax(url,fnSucc,fnFaild){
  3. //1、创建Ajax 对象
  4. if(window.XMLHttpRequest)
  5. {
  6. var oAjax=new XMLHttpRequest();                     //声明 兼容除IE6外  所有主流浏览器
  7. }
  8. else
  9. {
  10. var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //声明 兼容IE6   内置的 微软的 插件
  11. }
  12. //2、连接服务器(打开连接服务器)
  13. //  open(method,url,async)
  14. //  method ：请求的类型；GET 或 POST
  15. //  url ：文件在服务器上的位置
  16. //  async ：true（异步）或 false（同步）
  17. oAjax.open('GET',url,true);
  18. //3、发送请求
  19. oAjax.send();
  20. //4、接受请求
  21. oAjax.onreadystatechange=function (){          //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  22. /** readyState状态含义
  23. *  0: 请求未初始化
  24. 1: 服务器连接已建立
  25. 2: 请求已接收
  26. 3: 请求处理中
  27. 4: 请求已完成，且响应已就绪
  28. */
  29. if(oAjax.readyState==4){
  30. /** status  状态含义
  31. 200: "OK"    成功
  32. 404: 未找到页面  出错
  33. */
  34. if (oAjax.status==200) {
  35. //alert('成功了！'+Ajax.readyState);   //responseXML  获得 XML 形式的响应数据。
  36. fnSucc(oAjax.responseText);          //responseText 获得字符串形式的响应数据。
  37. }
  38. else{
  39. //alert('失败了');
  40. if(fnFaild){
  41. fnFaild
  42. }
  43. }
  44. }
  45. };
  46. }

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

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

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

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

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

读取json：

  1. [{a: 5, b: 7}, {a: 8, b: 12}]
  1. <script src="ajax.js"></script>
  2. <script>
  3. window.onload=function ()
  4. {
  5. var oBtn=document.getElementById('btn1');
  6. oBtn.onclick=function ()
  7. {
  8. ajax('arr2.txt?t='+new Date().getTime(), function (str){
  9. var arr=eval(str);
  10. alert(arr[0].a); //数组的下标  点a是代表下标里面的变量名  那个变量的值
  11. }, function (){
  12. alert('失败');
  13. });
  14. };
  15. };
  16. </script>

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

  1. [{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script src="ajax.js"></script>
  7. <script>
  8. window.onload=function ()
  9. {
  10. var oBtn=document.getElementById('btn1');
  11. var oUl=document.getElementById('ul1');
  12. oBtn.onclick=function ()
  13. {
  14. ajax('data.txt?t='+new Date().getTime(), function (str){
  15. var arr=eval(str);
  16. for(var i=0;i<arr.length;i++)
  17. {
  18. var oLi=document.createElement('li');
  19. oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
  20. oUl.appendChild(oLi);
  21. }
  22. }, function (){
  23. alert('失败');
  24. });
  25. };
  26. };
  27. </script>
  28. </head>
  29. <body>
  30. <input id="btn1" type="button" value="读取" />
  31. <ul id="ul1">
  32. </ul>
  33. </body>
  34. </html>

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

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

如下是对比图:

Ajax作用、及Ajax函数的编写

相关文章