ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。据小编翻墙了解到,ajax很早就有了,只不过那时候都不用它,后来谷歌把它用在谷歌地图上,人们感觉使用起来很方便,而且页面不用刷新,用户体验非常好(那时候的网站也没有什么用户体验^_^)

ajax 原理

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户,达到页面无刷新的效果


var xhr = new XMLHttpRequest()
//IE浏览器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
success(xhr.responseText)
} else {
fail && fail(xhr.status)
}
}
}

xhr.open()

第三个参数:true/fasle 默认值为true
false就是等待有返回数据的时候再继续往下走,还没有得到数据的时候就会卡在那里,直到获取数据为止。
true就是不等待,直接返回,这就是所谓的异步获取数据!

xhr.send

需要传送的数据,接受一个字符串类型

xhr.onreadystatechange

每次状态改变所都会触发的事件处理程序

xhr.readyState有以下几种状态

0 请求未初始化,open方法尚未调用

1 服务器连接已建立,open方法已经调用,尚未调用send方法

2 请求已接收,也就是接收到头信息了

3 请求处理中,也就是接收到响应主体了,这时因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误

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

xhr.status常见HTTP状态

0**:未被始化

1**:请求收到,继续处理

2**:操作成功收到,分析、接受

3**:完成此请求必须进一步处理

4**:请求包含一个错误语法或不能完成

5**:服务器执行一个完全有效请求失败

jQuery.ajax


$.ajax({
url: '',
Type: '',
data: '',
async:true,
dataType: '',
beforeSend: function(xhr) {
xhr.setRequestHeader("Access-Toke");
},
success: function (data) {
fn1()
},
error: function (err) {
error && error(err)
}
})
fn2()

success-函数

$.ajax中的success方法是否获取成功的回调,jQuery判断了以下几种状态,在源码中有以下代码(大概位置8193行)


isSuccess = status >= 200 && status < 300 || status === 304

304---通常的说法就是浏览器还有缓存,服务器告诉客户,原来缓存的文档还可以继续使用

async-布尔值

async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)

asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在fn1()这个地方,不会去执行fn2(),知道fn1()部分执行完毕。

dataType--字符串

dataType可以指定以下值

xml:返回XML文档,可用JQuery处理

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求

json:返回JSON数据

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数

text:返回纯文本字符串

beforeSend--函数

送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数

ajax优缺点

优点 : 通过异步,提升用户的体验,减少不必要的数据往返,实现局部刷新

缺点 : 对搜索引擎支持比较弱

参考文章:
jQuery官方文档
XMLHTTPRequest状态完整列表
jQuery源码
JavaScrip进度事件

来源:https://segmentfault.com/a/1190000017005786

分析ajax请求过程以及请求方法的更多相关文章

  1. web请求过程-学习使人快乐1

    智齿离开我10个小时了,现在除了书啥都不能啃········呜呜呜~     ~~~~~~~~~~~~~~~~~~~想滑滑梯~~~~~~~~~~~~~~~~~~~ 网络请求过程 web请求大多使用B/ ...

  2. 测试开发HTTP请求过程(一)

    测试开发HTTP请求过程 HTTP请求过程: 首先要熟悉http请求过程: 1,服务端建立socket监听 2,客户端发送http请求 3,客户端与服务端建立socket连接 4,客户端------t ...

  3. MyBatis 源码分析 - 配置文件解析过程

    * 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...

  4. zepto源码研究 - ajax.js(请求过程中的各个事件分析)

    简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...

  5. struts2请求过程源代码分析

    struts2请求过程源代码分析 Struts2是Struts社区和WebWork社区的共同成果.我们甚至能够说,Struts2是WebWork的升级版.他採用的正是WebWork的核心,所以.Str ...

  6. Ajax请求过程中显示“进度”的简单实现

    Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击 ...

  7. 分析Ajax请求并抓取今日头条街拍美图

    项目说明 本项目以今日头条为例,通过分析Ajax请求来抓取网页数据. 有些网页请求得到的HTML代码里面并没有我们在浏览器中看到的内容.这是因为这些信息是通过Ajax加载并且通过JavaScript渲 ...

  8. ajax用beforeSend自定义请求过程中客户端事件,提高用户体验

    本文为博主原创,未经允许不得转载: 在应用ajax的过程中,当我们再前台提交请求的时候,如果服务端响应事件比较长,就会导致需要等很长时间在前台才能接受到服务端返回的 响应结果,往往会导致用户重复点击按 ...

  9. ajax请求过程

    1.什么是ajax AJAX=Asynchronous JavaScript and XML  =====>异步的javascript和xml AJAX是在不重新加载整个页面的情况下与服务器交换 ...

随机推荐

  1. VC:不支持尝试执行的操作

    问题描述: 基于CDialogEx的对话框工程.VS2010开发环境. 调试运行到OnInitDialog()的CDialogEx::OnInitDialog()方法的时候弹出提示窗口"不支 ...

  2. Linux常用命令的缩写含义

    命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户rpm:redhat package manager 红帽子打包管 ...

  3. MacOS 读写 NTFS 即插即用.

    1. 安装osxfusehttps://osxfuse.github.io/ 2. 安装brewhttps://brew.sh/index_zh-cn.html 3. 安装ntfs-3gbrew in ...

  4. 初识类(class&struct)及C/C++封装的差异

    初识类(class&struct) 面向对象三大特性:封装.继承和多态.其中不得不谈的就是类,通过类创建一个对象的过程叫实例化,实例化后使用对象可以调用类成员函数和成员变量,其中类成员函数称为 ...

  5. vue.js_02_vue.js的基础指令

    1.v-cloak 作用:解决插值表达式闪烁的问题 当网速过慢时,或者加载数据时间过长时,网页会出现  {{msg}}  的现象 使用方法: <!--缺陷需要写style样式--> < ...

  6. 转:IO模型-- 同步和阻塞,异步和非阻塞的区别

    源地址 http://hi.baidu.com/deep_pro/item/db0c581af1c1f17e7b5f2534 这些词之间的区别难倒了很多人,还有什么同步阻塞, 同步非阻塞, 异步阻塞, ...

  7. RandomRowFilter(3)

    比较容易理解 用来随机抽取 RandomRowFilter:从名字上就可以看出其大概的用法,本过滤器的作用就是按照一定的几率(<=0会过滤掉所有的行,>=1会包含所有的行)来返回随机的结果 ...

  8. 安装py3ditles中遇到的问题

    安装时,在"(venv)$ pip install -e ." 会遇到"No module named 'pip._vendor.progress.helpers' ht ...

  9. JS高级---学习roadmap---5 parts

    JS高级---学习roadmap---5 parts part 1-3 part 4-5

  10. 凸优化 & 1概念

    ---恢复内容开始--- 放射集合 系数之和为1 相加仍然能在集合内,就是 纺射集合 子空间加一个常熟 就是纺射集合 , 例题2.1 一类特殊的线性方程组的解可以看作纺射 集合 纺射包 aff C 是 ...