AJAX应用的五个步骤

1.建立xmlHttpRequest对象

if ( window.XMLHttpRequest ) {

    xmlHttp = new XMLHttpRequest();

    if( xmlHttp.overrideMimeType ) {

        xmlHttp.overrideMimeType("text/xml");

    }

} else if ( window.ActiveXobject ) {

    var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

    for (var i = 0; i < activeName.length; i++) {

        try {

            xmlHttp = new ActiveXobject(activeName[i]);

            break;

        } catch(e) {}

    }

}

if (!xmlHttp) {

    alert("创建xmlhttprequest对象失败");

} else {}

2.设置回调函数

   xmlHttp.onreadystatechange = callback;

   function callback(){}

3.使用OPEN方法与服务器建立连接  xmlHttp.open("get","ajax?name="+ name,true)

此步注意设置http的请求方式(post/get),如果是POST方式,注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4.向服务器端发送数据

  xmlHttp.send(null);

  如果是POST方式就不为空

5.在回调函数中针对不同的响应状态进行处理

  if (xmlHttp.readyState == 4){       //判断交互是否成功

      if (xmlHttp.status == 200){         //获取服务器返回的数据         //获取纯文本数据

            var responseText =xmlHttp.responseText;

           document.getElementById("info").innerHTML = responseText;

      }

   }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 5,717评论 2 23
  • 什么是Ajax 不刷新页面的情况下从服务器获取、提交数据的一种数据交互方式。 Ajax使用步骤 1\创建Ajax对...
    LaBaby_阅读 1,943评论 0 0
  • 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就...
    亲爱的翔子阅读 3,379评论 0 0
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,587评论 0 7
  • 参加过铃铛子简笔画训练营第二期之后,陆续临摹别人的彩铅画,基本都是驴大萌的多,因为她的教程比别人详细些。其实也...
    米拉1977阅读 2,361评论 0 1