AJAX的学习笔记

RobinTang 发布于2019-08-22 14:03 / 1066人阅读

摘要：的学习笔记是异步和的缩写，它的作用是执行异步的网络请求。这就是一个格式的，向这个地址请求，将得到一个回调函数，执行就得到数据。

AJAX的学习笔记

AJAX是异步JavaScript和XML的缩写，它的作用是执行异步的网络请求。因为JS是线性同步，如果需要用户向浏览器发送一个请求，那么就需要等浏览器接收到了结果才能继续运行，如果发送到接受的时间太长，浏览器就会很长时间处于“假死”状态，这样的用户体验很不好。于是Jesse James Garrett介绍了一种新技术，即用JS执行异步网络请求，也就是AJAX。

XMLHttpRequest

AJAX的核心是XMLHttpRequest（简称XHR）对象。

通过一个XMR对象的构造函数，我们可以在JS上开始写AJAX。

判断浏览器

一般我们用var xhr=new XMLHttpRequest()来创建新的XHR对象，但是由于早期的IE版本并不支持原生的XHR，而是支持ActiveXObject，所以开始之前我们需要做一个判断：

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
}else{
  xhr=new ActiveXObject("Microsoft.XMLHttp");
}

设置onreadystatechange回调函数

设置回调函数的目的是，判断我们发送的请求是否成功，不管成功与否都给出一个回调响应，以让我们开始下一步的操作。如下：

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
}else{
  xhr=new ActiveXObject("Microsoft.XMLHttp");
}

xhr.onreadychange=function(){   //状态发生变化时，函数回调
  if(xhr.readyState===4){   //成功完成
    //判断响应结果：
    if(xhr.status===200){
      //成功，通过responseText拿到响应文本：
      return success(xhr.responseText);
    }else{
      //失败，根据响应码判断失败原因：
      return fail(xhr.status);
      }
  }else{
    //响应还在继续。
  }
}

XHR的用法

成功创建XHR对象后，第一个要用的方法就是open(),open()方法传递三个参数：

请求的类型；

请求的地址；

是否异步发送请求，默认为true，一般不用填。

例子：
open("get","example.php")

open()方法并不是真正的发送请求，要发送请求还需要用到另一个方法send()。get方式的请求不需要数据，则直接send()就好了，而post则需要把数据以字符串或者formData对象传进去。

安全限制

由于浏览器的同源政策，如果你请求的地址URL的域名和你当前的页面不一致，浏览器是不允许的。

所谓的一致，是指完全的一致。

www.xxx.com 和 xxx.com 是不一致的；

www.xxx.com 和www.xxx.com:80 是不一致的；

www.xxx.com:80 和www.xxx.com:8080是不一致的；

https://www.xxx.com 和http://www.xxx.com 也是不一致的。

但是很多时候我们需要从其他的网站调数据，那么怎么来解决它呢？所以我们需要用到跨域技术。

常用的技术有三种。

通过Flash插件发送HTTP请求；

通过在同源域名下架设代理服务器，JS把请求发送到代理服务器上；缺点是要在后端做多余的开发；

JSONP。

JSONP

这里重点介绍一下JSONP（JSON with padding，参数式JSON）。由于浏览器允许跨域引用JS资源，因此JSONP的原理就是通过触发在页面中的JS资源来引用数据。因为JSONP一般是由两部分组成：回调函数、数据，所以我们只要有一个JSONP格式的URL，并在页面中准备好两段代码：一段是触发JSONP中回调函数的代码，这段代码是用来渲染数据的；另一段是动态生成引用JSONP的。

举个例子：

我们借用一个根据IP地址查询天气的API：http://freegeoip.net/json?cal...。

这就是一个JSONP格式的URL，向这个地址请求，将得到一个handleResponse()回调函数，执行就得到数据。因此我们就可以拿出我们准备好的两段代码了。

第一段：

function handleResponse(response){
  console.log("you are " + response.ip + ",which is in " + response.city + response.region_name);
}

这一段代码是通过回调函数，把数据渲染出来。

第二段：

function getLocation(){
  var script=document.createElement("script"),
      script.src="http://freegeoip.net/json?callback=handleResponse"
  document.body.insertBefore(script,document.body.firstChild);
}

最后我们只要执行这个getLocation的函数，就完成了跨域调取数据。

CORS

我们在上面说到，浏览器的同源策略，会阻止接收跨域的请求结果，解决的方法已经在上面简单介绍了，此外，现在大部分浏览器已经能够支持CORS了。

CORS（Cross-Origin Resource Sharing，跨域资源共享），这是一种规范，允许Web应用服务器进行跨域访问控制，从而使跨域数据传输安全进行。

目前所有的浏览器都支持了这个策略，但是，我们的IE10以下的并不在其中……

CORS的原理是使用HTTP头部信息，让服务器端与客户端相沟通，以决定请求或响应是否成功。用一个简单但是不太恰当的比喻就是，CORS就是你（客户端）拿着一个口令（头信息）去通过某个关卡，而这个关卡也有口令，如果你的口令和关卡的口令匹配（相同或者为*），那么你就可以自由出入（跨域请求通过），如果不匹配，你就会被扣留（跨域请求失败）。

因此，在CORS中，关键的是服务端的口令（头信息）。只要服务端实现了CORS接口，就可以跨域通信。而在客户端中，只要在open()方法的URL中使用绝对定位即可实现CORS，而CORS通信过程，都是由浏览器完成，不需要用户处理，那么，浏览器是怎么处理的呢？

两种请求

浏览器把跨域请求分为两类：简单请求和预先请求。

简单请求需要满足下列两个条件：

请求方法是下列之一：

GET

HEAD

POST

请求头中的Content—Type请求头的值是下列之一：

application/x-www-form-urlencoded

multipart/form-data

text/plain

反之，不满足其中之一则是预先请求。浏览器会先发送一个OPTION请求，用来与域名服务器协商是否可以发送实际的跨域请求。

两种请求的具体流程过多，这里我就不细说了，有兴趣的小伙伴可以从下面几篇文章中更详细地了解CORS：

廖雪峰的AJAX教程

阿里云：CORS——跨域请求那些事儿

跨域资源共享 CORS 详解 - 阮一峰的网络日志

HTTP访问控制（CORS） - HTTP | MDN

总之我们只要明白，CORS是一种跨域策略。浏览器会在我们需要跨域操作时自定义头部信息，与服务端进行匹配，以确定是否同意跨域。而头信息的处理，一般情况下，是由浏览器自动完成，不需要开发者处理。

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92810.html

Ajax学习笔记

摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探...

Forest10 2019-08-23 14:01 评论0 收藏0
Ajax学习笔记

摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探...

wing324 2019-08-02 12:14 评论0 收藏0
Laravel学习笔记之Demo2——用Ajax来做个ToDoList(待更新)

摘要：抱歉，最近忙，本篇等有时间更新。引言本文基于框架做的一个生成和存储，主要目的是学习使用框架。书籍基于的，学习时使用框架开发。开发环境备注一直想把这本书的个作为系列分享出来，供初学者学习玩玩。抱歉，最近忙，本篇等有时间更新。引言本文基于Laravel框架做的一个URL生成和存储demo，主要目的是学习使用Laravel框架。内容基于英文书籍《Packt.Laravel.Applic...

luck 2019-06-27 14:08 评论0 收藏0
网易微专业之《前端开发工程师》学习笔记（1）

摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。何为网易微专业？微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...

geekzhou 2019-08-28 18:28 评论0 收藏0
网易微专业之《前端开发工程师》学习笔记（1）

摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。何为网易微专业？微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...

刘东 2019-08-01 15:00 评论0 收藏0
ajax学习笔记

摘要：对象是的基础使用它的和方法将请求发送到服务器或，请求的类型文件在服务器上的位置为异步，为同步将数据发送给服务器，仅用于方法当设为时，即为异步时，规定响应处于事件中的就绪函数的三个重要属性每次发生改变时就会调用这个函数存储着的状态，从到发生变 XMLHttpRequest对象是ajax的基础使用它的open()和send()方法将请求发送到服务器 var a=3; var requ...

LeviDing 2019-08-20 14:29 评论0 收藏0