AJAX异步JavaScript和XML 基本

最新推荐文章于 2024-04-17 17:01:56 发布

newnius

最新推荐文章于 2024-04-17 17:01:56 发布

阅读量654

点赞数

分类专栏：网站前端文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/u014663710/article/details/39524807

版权

网站前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【原创】AJAX异步JavaScript和XML

AJAX,即“AsynchronousJavascript + XML ”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。AJAX不是一种新的语言，它是由其他已有技术组合出的新的方法。

AJAX的原理是通过在后台与服务器进行少量数据交换，使网页实现异步更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页。而AJAX可以在不重新加载整个网页的情况下，对网页的某部分进行更新，这样的话就不会出现网页切换时出现的白屏现象，影响用户体验。

实现AJAX至少需要两个网页，一个含有js的网页（前端网页）和一个能动态返回数据的网页（不需要向用户展示，后台网页），js响应用户的操作，异步调用后台网页，并接收其返回的数据。有两种方式可以接收数据：POST 和 GET 。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，所以尽可能应使用GET来提高速度。

NOTE:然而，在以下情况中，请使用 POST 请求：

1、无法使用缓存文件（更新服务器上的文件或数据库）

2、向服务器发送大量数据（POST 没有数据量限制）

3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

另外，前台端页的js只能以字符串的形式接受数据，所以如果要接收数组、多个数据，接收后不能直接使用，要进行处理。方法有很多。

第一种就是后台返回XML，前端网页再解析出来。这种方法最可靠。

第二种是利用JSON（自行google），后台网页利用JSON函数处理，前端网页再用反函数分离。这种方法也不错，适合少量数据的传递。

第三种，后台网页利用特殊字符分隔数组，前端网页再分离。这种方法可行，但是可靠性不佳，很难保证原始数据中没有这个符号。

好了，直接贴JS代码吧。

GET方式的：

function del(id)

{

  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)

     {

        var result=xmlhttp.responseText;

        if(result=="true"){

var child=document.getElementById(id);

child.parentNode.removeChild(child);}

        }

     }  

  xmlhttp.open("GET","handle.php?action=del&id=" + id,true);

  xmlhttp.send();

}

POST方式：

function modify()

{

   var id=document.getElementById("id").value;

   var content=document.getElementById("content").value;

   var xmlhttp;

   if (content.length==0)

   {

      return;

   }

   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)

      {

        var result=xmlhttp.responseText;

        if(result=="true"){

           document.getElementById("content").value="";

        }

      }

   }

   xmlhttp.open("post"," handle.php?action=modify");

   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

   xmlhttp.send("id=" + id + "&content="+content);

}

两种方式的区别在于这几行：

xmlhttp.open("post","handle.php?action=modify");

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("id=" + id +"&content="+content);

第一行不用解释，第二行的解释：如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。第三行当然就是要post的数据啦。

后台网页跟正常网页差不多，不过只要输出相关数据，不要各种网页元素（html、body、div等等），前端用GET方式，后台也用GET，POST同理。

嗯，就这么多吧。更多请参考w3school。网址：http://www.w3school.com.cn/ajax/index.asp