AJAX--XMLHttpRequest五步使用法

简介: <h1><span style="font-size:18px">      </span><span style="font-size:24px">传统浏览方式和AJAX方式的不同</span></h1> <p><span style="font-size:18px"> </span></p> <p><span style="font-size:18px">      多数Web

      传统浏览方式和AJAX方式的不同

 

      多数Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面。常常是点击一个按钮,等待服务器相应,在点击另一个按钮,然后在等待,这样一个反复的过程。

       

       而AJAX是一种创建交互式网页的网页开发技术,其中XMLHttpRequest是核心的内容,它能够为页面中的javascript脚本提供特定的通信方式,从而使页面的javascript脚本和服务器之间形成动态交互的效果,XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面,而直接和服务器发生交互。

       


       XMLHTTPRequest的五步使用法

     1、建立XMLHTTPRequest对象      

//1.创建XMLHTTPRequest对象
                if(window.XMLHttpRequest){
                    //alert("IE7,IE8,FireFox");
                    xmlhttp =new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //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 == undefined || xmlhttp == null){
                    alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
                    return;
                }
                array.push(xmlhttp.readyState);

        2、注册回调函数    

xmlhttp.onreadystatechange=callback;
要注意的是callback不能写成callback(),我们是想把方法名告诉onreadystatechange这个属性,如果加了括号,就相当于把返回值告诉了onreadystatechange属性。


        3、使用open方法设置和服务器端交互的基本信息

        有两种方法     

      //GET方式交互                
      xmlhttp.open("GET","AJAX?name=" + userName,true);
                
      //POST方式交互               
      xmlhttp.open("POST","AJAX",true);
      //POST方式交互所需增加的代码
      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")


        4、设置发送的数据,开始和服务器端交互 

     //GET方式
     xmlhttp.send(null);

     //POST方式
     xmlhttp.send("name=" + userName);

        5、更新界面

        在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,并更新页面

     

     array.push(xmlhttp.readyState);
     //判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据
     if(xmlhttp.readyState == 4){
     //表示和服务器端的交互已经完成
        if(xmlhttp.status == 200){
        //表示服务器的是响应代码是200,正确返回了数据
           var message=xmlhttp.responseText;
           //XML数据对应的DOM对象的接受方法
           //使用的前提是,服务器端需要设置contenttype为text/xml
                        
           //记忆像div标签中填充文本内容的方法
           var div=document.getElementById("message");
           div.innerHTML=message;
           alert(array);
        }
     }

    

   总结

  初步了解XMLHTTPRequest对象的使用,便于以后更深入的去了解和使用。 

相关文章
|
Web App开发 JavaScript 前端开发
前端接收数据流实现图片预览效果--ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文为转载文章 原文链接:https://www.cnblogs.com/cdemo/p/5225848.html 首先要谢谢这位大神的无私贡献!解决了我的问题也完美表达了我当时的心路历程 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。
7995 0
|
2月前
|
XML JSON 前端开发
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
49 0
|
12月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX(异步JavaScript和XML)是一种在Web应用程序中创建快速动态更新的技术。使用AJAX,Web应用程序可以异步地向服务器发送和接收数据,而无需刷新整个页面。 AJAX广泛用于Web应用程序中,包括社交媒体,电子商务,在线游戏等等。 XMLHttpRequest 是AJAX中最重要的对象。它可以向服务器发送请求并接收响应。
|
Web App开发 XML 存储
【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
107 0
【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
|
XML JSON 前端开发
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib(3)
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
142 0
|
XML JSON 前端开发
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib(2)
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
151 0
|
XML Web App开发 JSON
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib(1)
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
159 0
|
XML JSON 前端开发
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
142 0
|
Web App开发 前端开发 JavaScript
艾伟:详解AJAX核心 —— XMLHttpRequest 对象 (上)
我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊。新手或者对低层还不是很了解的人可以看看,帮助理解与记忆。 XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。
1079 0
艾伟:详解AJAX核心 —— XMLHttpRequest 对象 (下)
继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的。那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document Object Model)文档对象模型。
952 0