AJAX初识

发布时间：2020-12-15 21:30:32 所属栏目：百科来源：网络整理

导读：1.什么是AJAX？ AJAX即“ A synchronous J avascript A nd X ML ”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术 2.为什么要用AJAX

1.什么是AJAX？

AJAX即“AsynchronousJavascriptAndXML”（异步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,Opera");
                    xmlhttp= new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if (window.ActiveXObject){
                    //IE6,IE5.5,IE5
                    //alert("IE6,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;
                        
                    }
                }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!