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工作原理




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;
                        
                    }
                }
                


相关内容推荐