Ajax基础（一）：认识Ajax

来源：互联网发布：ssh项目源码百度网盘编辑：程序博客网时间：2024/05/08 10:01

感觉自己是被一群人忽悠了，既然说了写点什么就写吧。我也不是什么技术牛人。充其量是个不是很菜得菜鸟而已。闲话少说，写点东西吧

Ajax对于大家来说都不是很陌生，都知道Ajax现在很火，无论是.net还是Java或者是php都在这方面下了很大的功夫。说了这么多我们得先弄明白什么是Ajax。

Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。个人理解说白了就是利用JavaScript发送请求，达到无刷新得目的。

今天先给大家弄一个小点的例子看看。

第一步：创建一个xml文件，Student.xml

         <?xml version="1.0" encoding="UTF-8"?>
         <student>
                           <name>JavaChaos</name>
                           <age>20</age>
                            <address>江苏徐州</address>
         </student>

内容很少，主要是让大家初步了解Ajax，无需大量数据。

第二步：创建一个html文件，Ajax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
           <HTML>
           <HEAD>
           <TITLE> New Document </TITLE>
           <META NAME="Generator" CONTENT="EditPlus">
           <META NAME="Author" CONTENT="">
           <META NAME="Keywords" CONTENT="">
           <META NAME="Description" CONTENT="">
           <script type="text/javascript" language="javascript">
           var xmlHttp = false;
           function makeRequest(url) {
                 xmlHttp = false;
           实例化一个XMLHttpRequest对象，由于浏览器支持不同，所以根据浏览器创建对象，对于初学者来说无需考虑这么多
           try {
                   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
           try {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e2) {
                xmlHttp = false;
              }
          }
           if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
               xmlHttp = new XMLHttpRequest();
                      }
                    if (!xmlHttp) {//当初始化失败得时候退出
                           alert('创建XMLHttpRequest对象出错！');
                          return false;
                    }
                   xmlHttp.onreadystatechange = alertContents;//调用alertContents函数
                   xmlHttp.open('GET', url, true);//发送请求为Get url就是我们xml得路径 true为当前发动（无刷新） false为提交时发送
                   xmlHttp.send(null);//在此不需要传什么参数进去
               }
               function alertContents() {
                   if (xmlHttp.readyState == 4) {//请求完成
                       if (xmlHttp.status == 200 || xmlHttp.status == 0) {//请求成功
                           alert(xmlHttp.responseText);//将xml文件原样输出
                       } else {
                           alert('发送请求失败！');//出现问题提示
                       }
                   }
               }
           </script>
            </HEAD>
            <BODY>
            <input type="button" value="测试" onclick = "makeRequest('Student.xml')">
           </BODY>
           </HTML>

一个简单得Ajax例子就完成了。大家可以运行一下看看，今天只是为了了解一下什么是Ajax，让大家知道Ajax并不是想象中哪么神秘，哪么难懂。今天就到这里，下次我们会详细介绍今天用到得XMLHttpRequest 对象相关知识。