科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件通过PHP和Sajax使用Ajax之JavaScript

通过PHP和Sajax使用Ajax之JavaScript

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

多年以来,创建真正具有响应性的 Web 应用程序这一目标一直被 Web 开发的一个简单事实所阻碍:要改变页面某一部分的信息,用户就必须重载整个页面

作者:Tyler Anderson 来源:ibm 2007年10月21日

关键字: Linux

  • 评论
  • 分享微博
  • 分享邮件
ActiveXObject

  在 Internet Explorer 中,用 ActiveXObject 代替 XMLHttpRequest。它的函数与 XMLHttpRequest 的函数相同,甚至函数名都是一样的,如清单 3 所示。

  清单 3. 初始化和使用 ActiveXObject

...
function loadHTML(URL, destination){
 dest = destination;
 if(window.XMLHttpRequest){
  ...
 } else if (window.ActiveXObject) {
  request = new ActiveXObject("Microsoft.XMLHTTP");
  if (request) {
   request.onreadystatechange = processStateChange;
   request.open("GET", URL, true);
   request.send();
  }
 }
}
</script>

  在这种情况下(使用 Internet Explorer),实例化一个 Microsoft.XMLHTTP 类型 的新 ActiveXObject 对象。然后,设置事件处理程序,调用对象的 open 函数。然后调用对象的 send 函数,这样 ActiveXObject 就工作了。

  processStateChange 函数

  这里描述的函数叫作事件处理程序或回调函数。回调函数的目的是当对象状态发生变化时,能够处理状态变化。在具体的应用中,这个函数的目的应当是处理状态变化、检验对象是否到达预期状态、读取动态装入的内容。

  processStateChange 函数由 XMLHttpRequest 或 ActiveXObject 对象在对象状态发生变化时调用。当对象进入状态 4 时,表明页面的内容已经接收完成(请参阅清单 4)。

  清单 4. 处理状态变化

...
var dest;

function processStateChange(){
 if (request.readyState == 4){
  contentDiv = document.getElementById(dest);
  if (request.status == 200){
   response = request.responseText;
   contentDiv.innerHTML = response;http://httpd.apache.org/download.cgi
  }
 }
}

function loadHTML(URL, destination){
...

  当 XML HTTP 对象到达状态 4 时,内容就已经就绪,可以提取并在浏览器的预期位置上显示。位置是 contentDiv,内容从文档中检索。如果请求是正确的,而且也按正确的顺序检索,那么响应的状态应当是 200。HTML 响应保存在 request.responseText 中,把它设置到 contentDiv.innerHTML,就可以在浏览器中显示它。

  如果在传输过程中没有发生错误,一切正常,那么新内容就会在浏览器中出现;否则,request.status 就不等于 200。请参阅清单 5 了解错误处理代码。

  清单 5. 错误处理

...
if (request.status == 200){
 response = request.responseText;
 contentDiv.innerHTML = response;
} else {
 contentDiv.innerHTML = "Error: Status "+request.status;
}
...

  清单 5 会把有关传输错误的信息发送给浏览器。在示例应用程序中将把这个函数用作回调函数。接下来,学习 GET 和 POST 的问题和它们的差异。

  GET 与 POST

  GET 和 POST 是进行 HTTP 请求和在请求中传递变量的两种方法。开发人员不应当随意选择使用哪种方法,因为两种方法都有使用意义。GET 请求把变量嵌在 URL 中,这意味着它们是可以加书签的。如果变量可能会修改数据库、购买商品或者做其他类似操作,这种方法会有副作用。假设偶然间加了书签的页面有一个购买商品的 URL ,里面包含地址、信用卡号以及 $100 的产品,全都嵌在 URL 中,那么重新访问这个 URL 就意味着购买这件商品。

  所以,只有在变量没有副作用,可以经常重新载入也不会发生什么的时候,才可以进行 GET 请求。适合 GET 请求的一个变量可能是分类 ID。可以反复重新载入,分类会反复显示,但是没有任何累积的效果。

  在另一方面,当变量对源(例如数据库)有作用时或者为了个人信息安全,应当采用 POST 请求。比如在购买一件 $100 的产品时,应当用 POST 请求。如果给付款页面加了书签,由于 URL 中没有变量,所以什么也不会发生,也不会意外地购买了不想购买的东西,或者在已经拥有的情况下又买了一次。

  GET 和 POST 的意义在 Ajax 中有同样的作用。在构建本文的应用程序和未来的应用程序时,理解 GET 和 POST 请求的差异是很重要的。这会有助于避免 Web 应用程序开发的常见缺陷。

  编码方法

  对于通过 HTTP 传输的数据进行编码,有多种方法,而 XML 只接受其中少数几种。互操作性最大的一种编码方法是 UTF-8,因为它向后兼容美国信息交换标准码(ASCII)。有许多在其他国家使用的国际字符的编码方式不向后兼容 ASCII ,如果不进行恰当的编码,就不适合放在 XML 文件中。

  例如,把字符串 ”Internationalization” 放在浏览器中,用 UTF-8 编码的话,会把它变成 I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n。经典 ASCII 字符的 UTF-8 编码与相同字符的 7 位 ASCII 码对应,这使 UTF-8 是一个理想的编码方法选择。

  了解这一点是很重要的,因为在通过 HTTP 传输和接收文档的过程中都要处理编码问题,在使用 Ajax 时也是一样。使用 Ajax 进行传输时,也应当使用 UTF-8 编码,因为标准化可以提高互操作性。

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章