大话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. Java 读取jar内的文件的超简便方法

    坑爹的java课程设计,偏要用jar来运行 读取.存储jar内文件的支持也好低 存储方法: 进入jar文件其实没有说的那么困难,jar文件本质是一个zip格式的压缩文件,只是把文件后缀名改了,要用Ja ...

  2. [SHELL]:let 命令详解

    [SHELL]:let 命令详解 摘自:https://blog.csdn.net/happygongzhuo/article/details/6819099 let :简单的计算器  语 法let[ ...

  3. (1)WePHP 开启WePHP

    新建入口文件index.php,定义新项目的目录地址APP_PATH,引入WePHP项目入口文件 <?php define('APP_PATH','./index/'); require_onc ...

  4. IIS请求筛选模块被配置为拒绝包含双重转义序列的请求404.11

    文件目录有这样一个包含了加号的文件:2015年日历表(A4+版).pdf 现在要求下载此文件,考虑这样一个url /UploadFile/2015年日历表(A4+版).pdf 如果在浏览器访问这个ur ...

  5. (二)ASP.NET中JavaScript的中英文(多语言)实现方案(二)

    在ASP.NET中JavaScript的中英文(多语言)实现方案中简单的介绍了js实现多语言的一种方案.下面将要讲述另外一种方法,尽管很相似,但是有些地方也是需要细细琢磨的,不说了,先看看. 在Lan ...

  6. 基于FPGA的XPT2046触摸控制器设计

    基于FPGA的XPT2046触摸控制器设计 小梅哥编写,未经许可,文章内容和所涉及代码不得用于其他商业销售的板卡 本实例所涉及代码均可通过向 xiaomeige_fpga@foxmail.com  发 ...

  7. opencv——(动态)旋转图像

    #include "stdafx.h" #include <opencv2\opencv.hpp> #include <opencv\cv.h> #incl ...

  8. &class::data_member与&object.data_menber之间的差异

    前者取data_member在class中的offset:指针类型是:type class::* 后者将会得到该data_member在内存中的真正地址:指针类型是:type*

  9. Android-ContentProvider-UriMatcher

    注意:在ContentProvider里面写对数据库增删改查的时候,千万不能 db.close();  cursor.close(); 等操作,不然其他应用访问不到数据,也没有必要写isOpen(); ...

  10. springboot pom 详解

    Starter POMs是可以包含到应用中的一个方便的依赖关系描述符集合.可以获取所有spring及相关技术的一站式服务,不需要翻阅示例代码,拷贝粘贴大量的依赖描述符. Starter名字的含义: 所 ...