前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax、$.get、$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象。
 
先来明确什么是Ajax,Ajax:“Asynchronous JavaScript and XML”,翻译过来就是异步JavaScript和XML。

Ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。意味这可以再不重新加载整个网页的情况下,对网页的某部分进行更新。
 
创建Ajax:
 
要创建Ajax,主角是XMLHttpRequest(下简称XHR)对象。
第一步:创建XHR对象
var xhr = new XMLHttpRequest();
 
第二步:向服务器发送请求
方法:open(method,url,async) 和 send(string)
open()方法传入三参数
  • method:请求的类型(GET/POST)
  • url:文件在服务器上的位置
  • async:布尔值,true表示异步,false表示同步(可选,默认为true)
send()方法将请求发送到服务器,有一个可选的参数string,仅用于POST类型的请求。
 
这里主要讨论一下async参数,XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true。那如果参数设置为false会有什么样的后果呢?同步请求的后果是:JavaScript会等到服务器响应就绪才继续执行。如果是比较大型的请求或者服务器处于繁忙状态,应用程序会挂起或停止。简单点说就是页面会一直卡到响应内容回来才继续运行。
 
在发送GET请求的时候,可能得到缓存的信息(IE中),导致我们发送的异步请求不能正确的返回我们想要的最新的数据。
 
方法一:在url中添加一个唯一的ID:(随机数)
 xhr.open("GET","demo.asp?t=" + Math.random(),true);
xhr.send();
这种方式可以避免拿到缓存中的旧消息,但它的每次请求仍然会被浏览器缓存起来,占用浏览器资源。
 
方法二:用setRequestHeader(header,value)方法向请求添加HTTP头。(关于setRequestHeader在后面讨论)
 xhr.open("GET","demo.asp",true);
xhr.setRequestHeader("If-Modified-Since","0"); //设置浏览器不使用缓存
xhr.send();
GET中的url可以拼接字符串从而达到传参,而传送数据一般用POST。
如果我们用POST方法向服务器发送数据,应该这样设置http头。
 xhr.open("POST","postdemo.asp",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //否则数据无法被正常接收
xhr.send("name=amie"); //send里写要发送的数据
 
第三步:服务器响应
XMLHttpRequest对象的responseText和responseXML属性分别获得字符串形式的响应数据和XML形式的响应数据
可以在控制台里输出响应
console.log(xhr.responseText);
还有三个关于响应状态的属性也经常用到:
  • readyState:存有XMLHttpRequest的状态。XHR对象会经历5种不同的状态
    • 0:请求未初始化(new完后);
    • 1:服务器连接已建立(对象已创建并初始化,尚未调用send方法);
    • 2:请求已接收;
    • 3:请求处理中;
    • 4:请求已完成,响应就绪;
  • status:(HTTP状态码很多,请自行了解,举例常见的)
    • 200:请求成功
    • 404:未找到页面
  • onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
因此上面那行代码可以改为:
 xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
};
关于setRequestHeader
在HTTP协议里,客户端向服务器请求某个网页的时候,需要发送一个HTTP协议的头文件,而XMLHttp就是通过HTTP协议去的网站上的文件数据的,所以也要发送HTTP头给服务器。
发送请求时会默认发一个头文件,如果我们需要修改或添加参数,就需要用到setRequestHeader方法。
Ps:
1.响应头包含了许多信息,有兴趣的小伙伴可以去了解一下。(HTTP涉及了许多计算机网络的知识)。
2.查看http请求头可以到开发者工具里的Network里查看。
 

(写在结尾:前端新人一枚~欢迎大家指出错误,谢谢阅览~)

Ajax原生XHR对象的更多相关文章

  1. 转:AJAX中xhr对象详解

    XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...

  2. 为XHR对象所有方法和属性提供钩子 全局拦截AJAX

    摘要 ✨长文 阅读约需十分钟 ✨跟着走一遍需要一小时以上 ✨约100行代码 前段时间打算写一个给手机端用的假冒控制台 可以用来看console的输出 这一块功能目前已经完成了 但是后来知道有一个腾讯团 ...

  3. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  4. ajax入门之建立XHR对象 (1)

    ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...

  5. 原生Ajax--XmlHttpRequest对象和jQuery.ajax()

    Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE) 1.XmlHttpRequest对象介绍 XmlHttpRequest对象的主要 ...

  6. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  7. 深入理解 ajax系列第一篇(XHR 对象)

    1999年,微软公司发布了IE5, 第一次引入新功能:允许javascript 脚本向服务器发起 hffp 请求.这个功能方式并没有被引起注意,知道2004年 Gmail 发布和 Google Map ...

  8. Ajax原生请求和java对象转成json

    \黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模 ...

  9. 原生Ajax( XHR 和 Fetch )

    原生Ajax 基本使用的四大步骤,简单易懂 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的 ...

随机推荐

  1. ViewPager Indicator的使用方法

    原文:http://my.oschina.net/u/1403288/blog/208402 项目源码:https://github.com/wangjing0311/ViewPagerIndicat ...

  2. [php基础]PHP.INI配置:Session配置详细说明教程

    网上有很多PHP.INI文件配置的中文说明,但是对于PHP初学者来说在进行PHP运行环境搭建配置时还是容易一头雾水,今天换一种角度来分享如何进行php.ini配置,以求达到解决实际问题的效果,开篇以P ...

  3. Swift2.0异常处理

    // 在抛出异常之前,我们需要在函数或方法的返回箭头 -> 前使用 throws 来标明将会抛出异常 func myMethodRetrunString() throws -> Strin ...

  4. iOS改变图片尺寸

    - (UIImage *)originImage:(UIImage *)image scaleToSize:(CGSize)size { UIGraphicsBeginImageContext(siz ...

  5. pod install后出现: [!] `<PBXResourcesBuildPhase UUID=`xxxx`>` attempted to initialize an object with an unknown UUID

    [!] `<PBXResourcesBuildPhase UUID=`xxx`>` attempted to initialize an object with an unknown UU ...

  6. access 2007 vba 开发中学到的知识(三)

    打开文件或程序 'API函数声明Public Declare Function ShellExecute Lib "shell32.dll" Alias "ShellEx ...

  7. redux-simple 简化版的redux

    作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...

  8. 工作流activiti-03数据查询(流程定义 流程实例 代办任务) 以及个人小练习

    在做数据查询的时候通过调用api来查询数据是相当的简单 对分页也进行了封装listPage(0, 4) ;listPage:分页查询 0:表示起始位置,4:表示查询长度 但是公司的框架封装了分页数据  ...

  9. PHP判断远程图片或文件是否存在

    PHP判断远程图片是否存在,此方法同样适用于判断远程文件是否存在,这是一种既然有效率且又准确的方法,建议采用此方法,以往使用get_headers()方法判断都是有问题的: function chec ...

  10. java获取当前时间

    /////////////////获取时间方法一////////////////////////////// java.util.Date uDate=new java.util.Date(); Sy ...