当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 记录AJAX充电点点滴滴

记录AJAX充电点点滴滴

2019年12月13日  | 移动技术网IT编程  | 我要评论

首先要明白什么是 ajax ？

ajax = 异步 javascript 和 xml。

ajax 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 ajax）如果需要更新内容，必需重载整个网页面。

有很多使用 ajax 的应用程序案例：新浪微博、google 地图、开心网等等。

1、ajax - 创建 xmlhttprequest 对象

xmlhttprequest 对象

 所有现代浏览器都支持 xmlhttprequest 对象 （ie5 和ie6 使用acactivexobject）。

xmlhttprequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

所有现代浏览器（ie7+、firefox、chrome、safari 以及 opera）均内建 xmlhttprequest 对象。

创建 xmlhttprequest 对象的语法：

variable = new xmlhttprequest();

老版本的 internet explorer （ie5 和 ie6）使用 activex 对象：

variable=new activexobject( "microsoft.xmlhttp" );

为了应对所有的现代浏览器，包括 ie5 和 ie6，请检查浏览器是否支持 xmlhttprequest 对象。如果支持，则创建 xmlhttprequest 对象。如果不支持，则创建 activexobject ：

1.1  xhr创建对象：

var xmlhttp;
if ( window.xmlhttprequest )
   {// code for ie7+, firefox, chrom, safari, opera
    xmlhttp = new xmlhttprequest();    
}
else
   {// code for ie5, ie6
   xmlhttp = new activexobject( "microsoft.xmlhttp" );
}

1.2、ajax - 向服务器发送请求

xmlhttprequest 对象用于和服务器交换数据。

向服务器发送请求

 

如需将请求发送到服务器，我们使用 xmlhttprequest 对象的 open() 和 send() 方法：

xmlhttp.open("get","test1.txt",true);  //规定请求的类型、url 以及是否异步处理请求。
xmlhttp.send();  //将请求发送到服务器。
方法描述
open(method,url,async)

规定请求的类型、url 以及是否异步处理请求。

  • method：请求的类型；get 或 post
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

  • string：仅用于 post 请求

 

get 还是 post？

与 post 相比，get 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 post 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（post 没有数据量限制）
  • 发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠

get 请求

一个简单的 get 请求：

xmlhttp.open("get","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

------解决方案--------------------

ajax请求 如果两次请求地址一样 服务器只会处理第一次请求
第二次请求返回内容和第一次一样  
加 math.random() 使每次请求地址不相同 服务器每次都去做不同的响应 
------解决方案--------------------
math.random()是调用javascript语法中的数学函数，能够产生随机数。
在ajax请求中作为url参数传递，能够有效的避免“ajax缓存”
在ie 6系列的浏览器中，默认提交给一个地址例如：aa.aspx ,将自动缓存，第二次再请求aa.aspx时候，就不会再重复请求了。当然，也可以使用new date () 时间戳的形式作为参数传递。

为了避免这种情况，请向 url 添加一个唯一的 id：

xmlhttp.open("get","demo_get.asp?t=" + math.random(),true);
xmlhttp.send();

如果您希望通过 get 方法发送信息，请向 url 添加信息：

xmlhttp.open("get","demo_get2.asp?fname=bill&lname=gates",true);
xmlhttp.send();

 

post 请求

一个简单 post 请求：

xmlhttp.open("post","demo_post.asp",true);
xmlhttp.send();

如果需要像 html 表单那样 post 数据，请使用 setrequestheader() 来添加 http 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("post","ajax_test.asp",true);
xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded");  //向请求中添加 tttp 头;
xmlhttp.send("fname=bill&lname=gates");
方法描述
setrequestheader(header,value)

向请求添加 http 头。

  • header: 规定头的名称
  • value: 规定头的值

 

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("get","ajax_test.asp",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

 

异步 - true 或 false？

ajax 指的是异步 javascript 和 xml（asynchronous javascript and xml）。

xmlhttprequest 对象如果要用于 ajax 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("get","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。ajax 出现之前，这可能会引起应用程序挂起或停止。

通过 ajax，javascript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

async = true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)   // 请求完成并成功返回
    {
    document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
    }
  }
xmlhttp.open("get","test1.txt",true);
xmlhttp.send();

 

async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("get","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，javascript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("get","test1.txt",false);
xmlhttp.send();
document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;

 

1.3 ajax - 服务器响应

如需获得来自服务器的响应，请使用 xmlhttprequest 对象的 responsetext 或 responsexml 属性。

属性描述
responsetext 获得字符串形式的响应数据。
responsexml 获得 xml 形式的响应数据。

responsetext 属性

如果来自服务器的响应并非 xml，请使用 responsetext 属性。

responsetext 属性返回字符串形式的响应，因此您可以这样使用：

document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;

例：

<html>
<head>
<script type="text/javascript">
function loadxmldoc()
{
var xmlhttp;
if (window.xmlhttprequest)
  {// code for ie7+, firefox, chrome, opera, safari
  xmlhttp=new xmlhttprequest();
  }
else
  {// code for ie6, ie5
  xmlhttp=new activexobject("microsoft.xmlhttp");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)
    {
    document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
    }
  }
xmlhttp.open("get","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="mydiv"><h2>let ajax change this text</h2></div>
<button type="button" onclick="loadxmldoc()">通过 ajax 改变内容</button>

</body>
</html>

responsexml 属性

如果来自服务器的响应是 xml，而且需要作为 xml 对象进行解析，请使用 responsexml 属性：

请求  文件，并解析响应：

xmldoc=xmlhttp.responsexml;
txt="";
x=xmldoc.getelementsbytagname("artist");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childnodes[0].nodevalue + "<br />";
  }
document.getelementbyid("mydiv").innerhtml=txt;

例：

<html>
<head>
<script type="text/javascript">
function loadxmldoc()
{
var xmlhttp;
var txt,x,i;
if (window.xmlhttprequest)
  {// code for ie7+, firefox, chrome, opera, safari
  xmlhttp=new xmlhttprequest();
  }
else
  {// code for ie6, ie5
  xmlhttp=new activexobject("microsoft.xmlhttp");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)
    {
    xmldoc=xmlhttp.responsexml;
    txt="";
    x=xmldoc.getelementsbytagname("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childnodes[0].nodevalue + "<br />";
      }
    document.getelementbyid("mydiv").innerhtml=txt;
    }
  }
xmlhttp.open("get","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>my book collection:</h2>
<div id="mydiv"></div>
<button type="button" onclick="loadxmldoc()">获得我的图书收藏列表</button>
 
</body>
</html>

 

1.4  ajax - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

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

readystate 属性存有 xmlhttprequest 的状态信息。

下面是 xmlhttprequest 对象的三个重要的属性：

属性描述
onreadystatechange 存储函数（或函数名），每当 readystate 属性改变时，就会调用该函数。
readystate

存有 xmlhttprequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "ok"

404: 未找到页面

 

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readystate 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)
    {
    document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
    }
  }

例：

<html>
<head>
<script type="text/javascript">
function loadxmldoc()
{
var xmlhttp;
if (window.xmlhttprequest)
  {// code for ie7+, firefox, chrome, opera, safari
  xmlhttp=new xmlhttprequest();
  }
else
  {// code for ie6, ie5
  xmlhttp=new activexobject("microsoft.xmlhttp");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)
    {
    document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
    }
  }
xmlhttp.open("get","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="mydiv"><h2>let ajax change this text</h2></div>
<button type="button" onclick="loadxmldoc()">通过 ajax 改变内容</button>

</body>
</html>

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readystate 的每个变化。

使用 callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 ajax 任务，那么您应该为创建 xmlhttprequest 对象编写一个标准的函数，并为每个 ajax 任务调用该函数。

该函数调用应该包含 url 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myfunction()
{
loadxmldoc("ajax_info.txt",function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)
    {
    document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
    }
  });
}

例：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadxmldoc(url,cfunc)
{
if (window.xmlhttprequest)
  {// code for ie7+, firefox, chrome, opera, safari
  xmlhttp=new xmlhttprequest();
  }
else
  {// code for ie6, ie5
  xmlhttp=new activexobject("microsoft.xmlhttp");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("get",url,true);
xmlhttp.send();
}
function myfunction()
{
loadxmldoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readystate==4 && xmlhttp.status==200)
    {
    document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
    }
  });
}
</script>
</head>
<body>

<div id="mydiv"><h2>let ajax change this text</h2></div>
<button type="button" onclick="myfunction()">通过 ajax 改变内容</button>

</body>
</html>

 

// code for ie7+, firefox, chrome, opera, safari

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网