Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

木子松的猫

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量404

点赞数 1

分类专栏：【前端】-- BS 【前端】-- Ajax

本文链接：https://blog.csdn.net/ldb987/article/details/79079369

版权

【前端】-- BS 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

【前端】-- Ajax

6 篇文章 0 订阅

订阅专栏

Ajax简介

ajax = 异步 JavaScript 和 XML。
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理

ajax的技术核心是 XMLHttpRequest 对象。

ajax请求过程：创建XMLHttpRequest、设置回调函数、连接服务器、向服务器端发送数据、服务器做出响应

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;

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

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

4.向服务器端发送数据

  xmlHttp.send(null);

  如果是POST方式就不为空 

  //xmlHttp.send(name="+ nam);

 5.在回调函数中针对不同的响应状态进行处理
function callback(){
     if(xmlHttp.readyState == 4){       //判断交互是否成功             
          if(xmlHttp.status == 200){         //获取服务器返回的数据                         
                var responseText =xmlHttp.responseText;     //获取纯文本数据                      
                document.getElementById("info").innerHTML = responseText;//向div标签中填充内容 
          }
}