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

Posted 52闹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了知了堂学习笔记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.javascript(绑定和调用)。

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();
} 

  其中要注意的是

    a、向服务器提交数据的类型;

    b、post和get请求的url地址和传递的参数写法不一样;

         c、传输方式,false为同步,true为异步。默认为true;

  为了增强自己对ajax的理解,写了这篇博文,把我理解的知识也分享给大家,刚开始写,有很多不足,欢迎来吐槽,指出不足,想要更详细了解,可以去http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html,很感谢这篇博文博主的详解。

       我在CSDN的新家,https://blog.csdn.net/weixin_42506342/article/details/80842385,里面有最新的文章,欢迎来访。

    

 

以上是关于知了堂学习笔记ajax工作原理的主要内容,如果未能解决你的问题,请参考以下文章

个人笔记《知了堂》ajax的get及post请求

[知了堂学习笔记]_初始化顺序

知了堂学习笔记/利用JavaScript对手风琴的实现/Aidrich

[知了堂学习笔记]_Java代码实现MySQL数据库的备份与还原

知了堂学习笔记java基础知识之继承

[知了堂学习笔记]_mysql函数