AJAX初识

1.什么是AJAX？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

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

2.为什么要用AJAX？

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

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

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

3.AJAX工作原理

• AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。

• 用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

• AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

4.AJAX代码

  var xmlhttp;            function submit() {                //alert("test");                //1.创建XMLHttpRequest对象                if (window.XMLHttpRequest){                    //IE7,IE8,FireFox,Mozilla, Safari, Opera                   // alert("IE7,IE8,FireFox,Mozilla, Safari, Opera");                    xmlhttp= new XMLHttpRequest();                    if (xmlhttp.overrideMimeType){                        xmlhttp.overrideMimeType("text/xml");                    }                }else if (window.ActiveXObject){                    //IE6,IE5.5,IE5                    //alert("IE6,IE5.5,IE5");                    var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",                    "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];                    for (var i=0 ; i <activexName.length;i++){                        try{                        xmlhttp = new ActiveXObject(activexName[i]);                        break;                    }catch(e){                                            }                    }                }                if (xmlhttp == underfind || xmlhttp == null ) {                    alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");                    return;                }                //alert(xmlhttp);                //2.注册回调方法                xmlhttp.onreadystatechange=callback;                //3.设置和服务器端交互的相互参数                                //记忆一个固定用法，获取文本框用户输入的内容                var userName = document.getElementById("UserName").value;                                xmlhttp.onen("GET","AJAX?name=" + userName,true);                                //4.设置向服务器端发送的数据，启动和服务器端的交互                xmlhttp.send(null);                      }            function callback() {                //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据                if (xmlhttp.readyState == 4){                    //表示和服务器端的交互已经完成                    if (xmlhttp.status ==200){                        //表示服务器的响应代码是200，正确的返回了数据                        //纯文本数据的接受方法                        var message = xmlhttp.responseText;                        //XML数据响应的DOM对象的接受方法                        //使用的前提是，服务器端需要设置content-type为text/xml                        // var domXml = xmlhttp.responseXML                                                //记忆向div标签中填充文本内容的方法                        var div = document .getElementById("message");                        div.innerHTML = message;                                            }                }