【知了堂学习笔记】ajax工作原理

来源:
网络
收录时间:
2021-04-29 00:48:47
阅读 43

摘要:ajax工作原理 什么是ajax?   ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思。从全称中就可以看出AJAX = 异步 JavaScript 和 XML。    AJAX 是一种用于创

ajax工作原理

什么是ajax?

  ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思。从全称中就可以看出AJAX = 异步 JavaScript 和 XML。

   AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

  使用 AJAX 的应用程序案例比如有:新浪微博、Google 地图、开心网,123rf网站等等

ajax是基于现有的Internet标准,所包含的技术

  1.CSS和XHTML (给数据定义样式)。

  2. DOM(信息交互和动态显示)。

  3.XMLHttpRequest(和服务器进行异步通信)。

  4.avascript(绑定和调用)。

ajax原理和XmlHttpRequest对象

  Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。XmlHttpRequest就是javascript可以及时向服务器提出请求和处理响应,从而不阻塞用户。达到无刷新的效果。

  XMLHttpRequest的属性:

    > onreadystatechange:每次状态改变所触发事件的事件处理程序;

    > responseText:从服务器进程返回数据的字符串形式;

    > responseXML:从服务器进程返回的DOM兼容的文档数据对象;

    > status:从服务器返回的数字代码(状态码),比如常见的404(未找到)和200(成功);

    > status Text :伴随状态码的字符串信息;

    > readyState: 对象状态值:

      0 (未初始化) 对象已建立,但尚未初始化,尚未调用open方法;

      1 (初始化) 对象已建立,链接读取中,但尚未调用send方法;

      2 (发送数据) 请求已接收读取,send方法已调用,但是当前的状态及http头未知;

      3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误;

      4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。

  由于各浏览器之间存在差异,这个差异主要体现在IE和其它浏览器之间,所以创建一个XMLHttpRequest对象可能需要不同的方法。下面是我创建XMLHttpRequest对象的方法。

//获取显示文本的对象
var msg = document.getElementById("msg"); function checkUserFn(){   //获取要传送的对象的值   var username = document.getElementById("username").value
  // 1 创建xhr对象(XMLHttpRequest)   var xhr = null;//创建xhr,初值为空
  //非IE浏览器创建XmlHttpRequest对象   if(window.XMLHttpRequest){     xhr = new XMLHttpRequest();   }   //IE浏览器创建XmlHttpRequest对象   if(window.ActiveXObject){     xhr = new ActiveXObject("Microsoft.XMLHTTP");   }
  //2 打开ajax链接通道,配置参数(请求方式,请求地址url,同步or异步)。   xhr.open("POST",url,true);

    xhr.onreadystatechange = function () {
     if (xhr.readyState == 4) {

      msg.innerHTML = "数据正在加载...";

       if (xhr.status == 200) {
          document.write(xhr.responseText);
       }
     }
   }

   //3 发送请求

   xhr.send();
} 
查看全文
相关笔记
相关分类
相关标签
返回顶部