大话AJAX原理

一、什么是Ajax

Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。
Ajax目的:提高用户体验,较少网络数据的传输量

二、Ajax原理是什么

在解释Ajax原理之前,我们不妨先举个“领导想找小李汇报一下工作”例子,领导想找小李问点事,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作。

Ajax请求数据流程与“领导想找小李汇报一下工作”类似。其中最核心的依赖是浏览器提供的XMLHttpRequest对象,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情,等收到XHR返回来的数据再渲染页面。理解了Ajax的工作原理后,接下来我们探讨下如何使用Ajax。

三、Ajax的使用

1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)

    1. var xhr=null;  
   2. if (window.XMLHttpRequest)  
   3.   {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
   4.   xhr=new XMLHttpRequest();  
   5.   } else{// 兼容 IE6, IE5
   6.     xhr=new ActiveXObject("Microsoft.XMLHTTP");  
   7.   }

2.向服务器发送请求

    1. xhr.open(method,url,async);  
   2. send(string);//post请求时才使用字符串参数,否则不用带参数。

method:请求的类型;GET 或 POST

url:文件在服务器上的位置

async:true(异步)或 false(同步)
注意:post请求一定要设置请求头的格式内容

xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面,即请求体

3.服务器响应处理(区分同步跟异步两种情况)

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

①同步处理

    1. xhr.open("GET","info.txt",false);  
   2. xhr.send();  
   3. document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②异步处理

相对来说比较复杂,要在请求状态改变事件中处理。

    1. xhr.onreadystatechange=function()  {
   2.    if (xhr.readyState==4 &&xhr.status==200)  {
   3.       document.getElementById("myDiv").innerHTML=xhr.responseText;  
   4.      }    5.    }

readyState

0-(未初始化)还没有调用send()方法

1-(载入)已调用send()方法,正在发送请求

2-(载入完成)send()方法执行完成,已经接收到全部响应内容

3-(交互)正在解析响应内容

4-(完成)响应内容解析完成,可以在客户端调用了

status

③GET和POST请求数据区别

请求数据时的区别,详情见下面两张图:

总而言之:

  • GET请求的差数直接拼接在url上面

  • POST请求的参数就不是放在url了,而是放在send里面,即请求体

四、结束语

其实通过 XMLHttpRequest或者封装后的框架进行网络请求,这种方式已经有点老旧了,配置和调用方式非常混乱,近几年刚刚出来的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用。

**********转摘:http://url.cn/52GlrTk

 
 
浪里行舟

赞赏

长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

大话AJAX原理的更多相关文章

  1. AJAX原理总结

    AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传 ...

  2. 什么是ajax,ajax原理是什么 ,优缺点是什么

    AJAX工作原理及其优缺点   1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...

  3. ajax原理图解

    Ajax 原理图解 摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php Ajax其实已经使用很久了,但一直也没有时间正经的找本 ...

  4. 浅析ajax原理与用法

    1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XML ...

  5. Ajax原理一篇就够了

    Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...

  6. 封装ajax原理

    封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=va ...

  7. 简述Ajax原理及实现步骤

    简述Ajax原理及实现步骤 1.Ajax简介 概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML). 现在允许浏览器与务器通信 ...

  8. Ajax -- 原理及简单示例

    1. 什么是Ajax •Ajax被认为是(AsynchronousJavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 2. Ajax ...

  9. Ajax原理-重点

    Ajax原理 AJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术.它可以令开发者只向服务 ...

随机推荐

  1. chrome crx下载路径

    chrome crx下载后会被删除,可在检查时粘贴出来,下载路径在: %localappdata%\Google\Chrome\User Data\Webstore Downloads 参考:http ...

  2. 福大软工 · BETA 版冲刺前准备(团队) [已完成]

    写在前面 本次作业地址 林燊大哥 过去存在的问题 算法组 没有考虑到数据集不充足的情况.一开始我们将所有数据集按照8:1:1进行分割,分别分配给训练集.开发集和测试集.然鹅后来发现采集到的数据不够充足 ...

  3. linux tomcat自动部署shell

    #!/bin/bash   #defined    TOMCAT_HOME="/usr/java/tomcat/tomcat"   TOMCAT_PORT=80   PROJECT ...

  4. IO编程之writelines方法

    1.使用with open as 函数写入文件 2.创建后的文件名为database.txt 3.创建一个函数进行读取文件,使用for循环遍历整个文件内容 4.使用if __name__=='__ma ...

  5. C#编程之程序集和反射

    这里我又唠叨几句,大家在学习的时候,如看书或者看视频时觉得非常爽,因为感觉基本都看得懂也都挺容易的,其实看懂是一回事,你自己会动手做出来是一回事,自己能够说出来又是另一回事了.应该把学到的东西变成自己 ...

  6. C# 静态类的使用

    静态类与非静态类基本相同,但存在一个区别:静态类不能实例化.也就是说,不能使用 new 关键字创建静态类类型的变量.因为没有实例变量,所以要使用类名本身访问静态类的成员. static class C ...

  7. 深入理解java虚拟机(十三) Java 即时编译器JIT机制以及编译优化

    在部分的商用虚拟机中,Java 程序最初是通过解释器( Interpreter )进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁的时候,就会把这些代码认定为“热点代码”.为了提高热点代码的 ...

  8. 解决NIOS II工程移动在磁盘上位置后project无法编译问题

    说明:本文档于2017年3月4日由小梅哥更新部分内容,主要是增加了讲解以Quartus II13.0为代表的经典版本和以15.1为代表的更新版本之间,解决问题的一些小的差异. 如果用户只是想快速解决问 ...

  9. 洛谷 P2596 [ZJOI2006]书架 (splay)

    题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下一本.由于这些 ...

  10. C++ 调用C++写的类库的2种方法之一(隐式链接)

    一:创建C++ DLL类库,名称:Dll1 1.Dll1.h /*#ifndef Dll_API #else #define Dll_API _declspec(dllimport) #endif * ...