zoukankan      html  css  js  c++  java
  • 【知了堂学习笔记】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,里面有最新的文章,欢迎来访。

        

  • 相关阅读:
    使用图表控件
    XPath 语法规则入门
    用javascript生成日历控件
    .NET开发人员应该关注的七个开源项目
    浅谈软件技术的发展趋势及定位
    System.Runtime.InteropServices.Automation
    【摘录】手机操作系统三国时代的结束
    .NET的资源并不限于.resx文件,你可以采用任意存储形式[上篇] (转载)
    OSPaas征途(前言)
    .NET的资源并不限于.resx文件,你可以采用任意存储形式[下篇]
  • 原文地址:https://www.cnblogs.com/SunlIng-52/p/8283068.html
Copyright © 2011-2022 走看看