异步交互基础XMLHttpRequest对象

来源：互联网发布：mac office无法更新编辑：程序博客网时间：2024/06/14 06:05

    最近做百度地图开发，又接触了一把原生的ajax，因为之前写ajax一直使用的是Jquery封装好的ajax对象，先说一下原生的ajax吧。
    ajax：异步的javascript和xml，它不是一门语言，而是一种在不刷新当前网页的情况下更新网页数据的一种新标准，它的核心是XMLHttpRequest对象，教程可以参考W3C的教程里面有详细的参数说明http://www.w3school.com.cn/ajax/ajax_intro.asp；
    结合看到的一道面试题说一下其中的原理。题目如下：
XMLHttpRequest–这是什么，怎么完整的执行一次POST请求，怎样检测错误？
    XMLHttpRequest对象用于与后台数据的交互（在不刷新当前网页的情况下）
    一次完整的执行POST请求，首先需要判断浏览器是否支持XMLHttpRequest对象，在IE低版本的浏览器下可能不支持，判断的代码如下所示。

if(window.XMLHttpRequest){    var xmlhttp=new XMLHttpRequest();}else if(window.ActiveXobject){//判断浏览器是否支持ActiveX控件，IE7之前的版本    var xmlhttp=new ActiveXobject("Microft.XMLHttp");}

设置请求行参数，POST方法，url，是否异步，设置完成后发送请求。注册回掉函数，判断交互是否完成，是否返回正确的数据，代码如下：（对于GET请求可以不设置发送参数）

if(xmlhttp!=null){     xmlhttp.open('post','/gpsobj/savePolygon',true);//设置请求行参数     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");//设置内容类型，常用到的几种类型将在下面说明     xmlhttp.send(pointArrs);//发送请求及请求体内容     xmlhttp.onreadystatechange=function(){//注册回掉函数        if(xmlhttp.readyState==4){//交互已经完成            if (xmlhttp.status==200) {//是否正确请求到内容，200表示请求成功                    // console.log("1");            }        }    }}

到这里一次完整的POST请求已经完成，下面我要说的是在项目开发中我需要设置的内容类型，也就是content-type,http中的content-type经常用到的三种类型，，application/json,text/plain；

application/x-www-form-urlencoded：表单默认的提交数据的格式,数据被编码为key/value格式发送到服务器.在项目中我需要以这种方式，将多边形的坐标发送到远程服务器解析（没用application/json方式发送是考虑到方便将值保存到数据库，但是也可以用json格式发送，在服务器存数据库的时候再将json格式的值转换为字符串）。完整的代码如下所示。
application/json：数据以JSON对象的方式发送
text/plain：数据以纯文本的方式发送，这是内容的默认发送方式。

  //获取多边形点数组,提交到服务器getPoint:function(polygon){   var path=polygon.getPath();   var pointArr=[];   for(var i=0;i<path.length;i++){        // console.log('第'+i+'个点的坐标为('+path[i].lng+','+path[i].lat+')');   var point='{"lng":'+path[i].lng+','+'"lat":'+path[i].lat+'}';        pointArr.push(point);    }    var pointArrs='points=['+pointArr+']';    if(xmlhttp!=null){        xmlhttp.open('post','/gpsobj/savePolygon',true);        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");        xmlhttp.send(pointArrs);        xmlhttp.onreadystatechange=function(){            if(xmlhttp.readyState==4){                if (xmlhttp.status==200) {                // console.log("1");                }            }        }    }},

0 0