黑马程序员-初探ajax技术

最新推荐文章于 2024-04-26 00:19:50 发布

zregui_nhu

最新推荐文章于 2024-04-26 00:19:50 发布

阅读量783

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax json 异步服务器 javascript

本文链接：https://blog.youkuaiyun.com/u014241593/article/details/21639179

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了Ajax的核心概念，包括其优势、工作原理及其在网页开发中的运用。重点介绍了通过JavaScript方法实现Ajax的基本流程，以及如何利用Ajax进行无刷新更新页面和减轻服务器负担的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

AJAX的优势
　　1.减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造

成的负担；

　 2.无刷新更新页面，减少用户实际和心理等待时间；

3.更好的用户体验；

4.也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的

负担，节约空间和带宽租用成本；

5.Ajax由于可以调用外部数据；

工作原理图

AJAX的运用

//javascript方法实现AJAX

function ajaxFunction(){

//判断浏览器

//核心XmlHttpRequest对象 xmlHttp

    var xmlHttp,question,answer;
   try{
       xmlHttp=new XMLHttpRequest();
   }catch(e){
       try{
           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }catch(e){
           try{
               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }catch(e){
               alert("您的浏览器不支持Ajax!");
               return false;
           }
       }
   }

//open方法初始化XmlHttpRequest，以get形式请求，访问地址http://localhost/aa/myweb/usename.xml，true

是异步发送，

xmlHttp.open("GET","http://localhost/aa/myweb/usename.xml",true);//创建一个http请求
xmlHttp.send(null);////发送请求

//onreadystatechange事件检查XmlHttpRequest对象实例的属性来获知调用的状态

    xmlHttp.onreadystatechange=function(){
       if(xmlHttp.readyState==4){//如果请求完成加载
           usenames=xmlHttp.responseXML.getElementsByTagName("usename");//读取服务器中xml文件的数据
           for(var i=0;i<usenames.length;i++){
               if(document.myform.usename.value==usenames[i].firstChild.nodeValue){
                   document.getElementById("msg").innerHTML="用户名已存在！";
                   document.getElementById("msg").style.color="red";
                   return false;
               }
           }
           document.getElementById("msg").innerHTML="用户名不存在，可使用！";
           document.getElementById("msg").style.color="green";
       }
   }

}