前端攻城狮第二步---你用的到的Ajax

作者：极客学院 发布时间：08月20日 17:46

　　前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。第一步要学好HTML、CSS和JavaScript！接着就要学习交互，然而掌握了Ajax无疑是如虎添翼的一项技能。下面一起学习一下Ajax的基础知识。

　　　　　　　　　　　　　　　　· Ajax 原理　　　　　　　　　　

　　　　　　　　　　　　　　　　· jQuery Ajax

　　　　　　　　　　　　　　　　· Ajax XML　　　　　　　　　

　　- Ajax 原理

　　AJAX = 异步 JavaScript 和 XML。

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

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

　　不使用 AJAX的网页如果需要更新内容，必需重载整个网页面。

　　- Ajax XML

　　可用来与 XML 文件进行交互式通信。

　　例：

　　function loadXMLDoc(url)
　　{
　　var xmlhttp;
　　var txt,xx,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)
    　　{
    　　txt="＜table border='1'＞＜tr＞＜th＞Title＜/th＞＜th＞Artist＜/th＞＜/tr＞";
    　　x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    　　for (i=0;i<x.length;i++)
      　　{
      　　txt=txt + "＜tr＞";
      　　xx=x[i].getElementsByTagName("TITLE");
        　　{
        　　try
          　　{
          　　txt=txt + "＜td＞" + xx[0].firstChild.nodeValue + "＜/td＞";
          　　}
        　　catch (er)
          　　{
          　　txt=txt + "＜td＞ ＜/td＞";
          　　}
        　　}
    　　xx=x[i].getElementsByTagName("ARTIST");
      　　{
        　　try
          　　{
          　　txt=txt + "＜td＞" + xx[0].firstChild.nodeValue + "＜/td＞";
          　　}
        　　catch (er)
          　　{
          　　txt=txt + "＜td＞＜/td＞";
          　　}
        　　}
      　　txt=txt + "＜/tr＞";
      　　}
    　　txt=txt + "＜/table＞";
    　　document.getElementById('txtCDInfo').innerHTML=txt;
    　　}
  　　}
　　xmlhttp.open("GET",url,true);
　　xmlhttp.send();
　　}

　　loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

　　当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符。

　　- jQuery Ajax

　　jQuery 提供多个与 AJAX 有关的方法。

　　通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

　　jQuery load() 方法

　　load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

　　语法：

　　$(selector).load(URL,data,callback);

　　URL 参数：必备，规定您希望加载的 URL。

　　data 参数：规定与请求一同发送的查询字符串键/值对集合。

　　callback 参数：是 load() 方法完成后所执行的函数名称。

　　　　　  极客学院相关课程推荐：

　　　　　　jQuery AJAX之异步访问和加载片段>>

　　　　　　前端开发调试基础>>

　　　　　　定向爬虫：动态加载网页的爬取>>