目录

  1. Ajax与Http协议详解
  2. Xhr对象
    1. xhr对象发送请求整体感知
    2. xhr对象的常用属性和方法
  3. xhr对象发送post请求
  4. xhr对象的兼容性问题
  5. 请求超时timeout与监听超时ontimeout
  6. 登录post请求实例

1.Ajax与Http协议详解

我们在jQuery中已经提到了Ajax,并且通过$.ajax()方法实现了和前后台完成的简单交互。但事实上在工作当中jQuery所提供的功能却是远远不够的,绝大部分的公司实际上并不希望他们的开发者使用现有的Ajax框架,而是选择自行封装一个功能相似但针对性却更强的内容。因此我们必须知道在js内部,Ajax到底是怎样工作的。

而在此之前,让我们先对Ajax本身做一些详细的说明。

描述:Ajax全名为Asynchronous javascript and xml。

是指围绕【由js向服务器发起http请求】这个功能而开发的一整套完整的做法。

由来:99年Microsoft公司第一次在IE5.0中引入此功能

04年Gmail发布、05年Google Map发布时此功能才被重视

05年2月Ajax正式提出

06年W3C发布其对应的国际化标准

概述:Ajax模块在处理网络请求的时候包括以下四个步骤

(1)创建Xhr对象

(2)发出HTTP请求

(3)接收服务器回传的数据

(4)更新网页数据

补充:Ajax可以发出同步请求,也可以发出异步请求。

但大多数情况下指的是异步请求,因为同步的Ajax请求对浏览器会产生“阻塞效应”

实例:

cvar xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status == 200){

console.log(JSON.parse(xhr.responseText));

}else{

console.error(xhr.statusText);

}

}

}

xhr.onerror = function (e) {

console.error(xhr.statusText);

};

xhr.open('GET','ajax.php',true);

xhr.timeout = 5000;

xhr.send(null);

2.Xhr对象

2.1.xhr对象发送请求整体感知

【Ajax发送请求】这件事情并不是一句话带过就可以的,在Ajax中对整个请求从创建到发送都有着一套严格的标准流程。就好像车间生产产品,流水线上每一个步骤的操作完毕之后才能打包出售。

在Ajax规则中,"请求"从创建到被发送需要至少经历如下几个步骤:

通过XMLHttpRequest类创建xhr对象

为xhr对象添加属性与回调方法

令xhr对象执行open()方法,指明请求被发往某处

令xhr对象执行send()方法,发出请求。

说明:XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。

通俗上来说将此对象称为request请求对象、请求对象或请求。

2.2.xhr对象的常用属性和方法

在整体感知中我们看到的例子中的属性和方法,基本都是要掌握的内容。或许有一些内容

并没有体现在上面,但相信我他们都会是你今后离不开的东西。

(1)onreadystatechange属性

描述:onreadystatechange属性指向一个回调函数。

当页面的加载状态发生改变的时候readyState属性就会跟随发生变化,

而这时readystatechange属性所对应的回调函数就会自动被调用。

语法:xhr.onreadystatechange = function(){};

(2)readyState属性

描述:是一个只读属性,用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态

一般会在onreadystatechange事件的回调函数中,

通过判断readyState属性的值,进而执行不同状态对应的函数。

语法:xhr.onreadystatechange = function(){

if(xhr.readyState == n){

// 执行对应的函数

}

}

说明:

值为0,对应常量UNSENT

表示XMLHttpRequest实例已经生成,但是open()方法还没有被调用。

值为1,对应常量OPENED

表示send()方法还没有被调用,仍然可以使用setRequestHeader() 设定HTTP请求头

值为2,对应常量HEADERS_RECEIVED

表示send()方法已经执行,并且头信息和状态码已经收到。

值为3,对应常量LOADING

表示正在接收服务器传来的body部分的数据,如果responseType属性

是text或者空字符串,responseText就会包含已经收到的部分信息。

值为4,对应常量DONE,表示服务器数据已经完全接收,或者本次接收已经失败了。

(3)status属性

描述:表示本次请求所得到的HTTP状态码,它是一个整数。

语法:if(xhr.readyState == n){

if(xhr.status == 200){

//通信成功

}

}

说明:

a.本属性是只读属性。

b.本属性有以下可能值:

补充:一般来说认为200就是通信成功的标志。

200, OK,访问正常

301, Moved Permanently,永久移动

302, Move temporarily,暂时移动

304, Not Modified,未修改

307, Temporary Redirect,暂时重定向

401, Unauthorized,未授权

403, Forbidden,禁止访问

404, Not Found,未发现指定网址

500, Internal Server Error,服务器发生错误

(4)statusText属性

描述:表示服务器发送的状态提示,是一个只读字符串。

语法:xhr.statusText

说明:不同于status属性,该属性返回状态码所对应的状态信息。

比如OK。

(5)responseText属性

描述:返回从服务器接收到的字符串内容,该属性为只读。

如果本次请求没有成功或者数据不完整,该属性就会等于null。

如果服务器返回的数据格式是JSON,就可以使用responseText属性来进行数据解析。

语法:xhr.responseText

(6)open()方法

描述:表示要将请求发往某处,只是设置而不是真的发送。

语法:xhr.open(‘请求类型’,’url地址’,是否异步);

说明:

第一个参数用来设置get/post请求

第二个参数用来设置请求发送到的url地址

第三个参数是布尔值用来设置是否异步发送,默认false表示同步。

补充:

目前因为我们的页面都采用localhost方式在本地主机直接访问,

因此url直接写出php文件的相对路径即可。

而如果通过其他方式打开可能会引起js的跨域问题,就会报错。

而这并不是今天的内容。

(7)setRequestHeader()方法

描述:用于设置HTTP头信息。

语法:xhr.setRequestHeader(‘key’,’value’);

说明:

本方法必须在open()之后、send()之前被调用

本方法用来设置在请求发送时,一并被发送出的一些补充信息

例子:

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);

xhr.send(JSON.stringify(data));

(8)send()方法

描述:用于实际发出HTTP请求。

语法:xhr.send(formData);

说明:send()方法的参数是表单数据,为post请求准备。

如果是get请求则参数直接写null即可。

3,xhr对象发送post请求

描述:post请求和get请求的差异就在于多了一个表单数据,

在xhr对象中可以通过FormData进行构建

语法:var formData = new FormData();

formData.append('key',value);//value如果是字符串类型要加引号。

xhr.send(formData);

说明:

至于formData的创建时机和位置,只要你能够在请求发送出去之前

也就是xhr.send()语句被写出之前添加给xhr对象

那么你愿意把formData放在哪就放在哪。

例子:

var userName = document.querySelector('.userName').value;

var password = document.querySelector('.password').value;

var formData = new FormData();

formData.append('userName',userName);

formData.append('password',password);

4,xhr对象的兼容性问题

描述:xhr对象的获取方式在IE和非IE下是需要使用不同方法。

语法:

标准浏览器支持的方法为: XMLHttpRequest()

IE浏览器支持的方法为: ActiveXObject()

例子:

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else if(window.ActiveXObject){

xhr = new ActiveXObject();

}

说明:可以直接使用三目运算符解决

xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

5.请求超时timeout与监听超时ontimeout

描述:timeout属性等于一个整数,用来设置当请求发出后等待接收响应的时间。

ontimeout()方法则是当等待超时后,自动执行的回调方法。

语法:xhr.timeout = xxx;

xhr.ontimeout=function(){

console.error("The request for"+url地址+"timed out");

};

说明:timeout属性单位是毫秒,表示当请求发出后等待响应的时间。

如果在设置的时间内没能收到后台响应的内容,则认为请求超时(执行ontimeout)。

补充:如果该属性等于0,就表示没有时间限制。

例子:xhr.timeout = 5000;//5秒后超时

xhr.ontimeout = function(){

console.error("The request for "+ajax.php+"timed out.");

};

6.登录post请求实例

要求:

(1)在html页面中获取用户信息,并在点击的时候将信息post到后台

(2)在php文件中通过$_POST对象获取html文件发来的信息,并根据输入内容进行响应

扩展:

(3)如果前两问能够自行实现并且没问题,则使用sql语句来检查

输入的用户名密码是否是DB中的条目,并根据DB的检索结果反馈给用户。

小贴士:操作db的时候,最好php原生操作和pdo操作都写一遍。

另外sql语句要求不看提示自行编写。

Ajax与Http协议的更多相关文章

  1. 关于Ajax中http协议

    关于ajaxajax是异步的JavaScript和XML,优点是无刷新的与后天通信并获取数据,只更改页面中需要更改的部分,而不是刷新整个页面,减少无意义的数据传输,提高了效率和用户体验 1.协议和HT ...

  2. http协议与http代理

    TCP/IP协议族 TCP/IP(Transmission Control Protocol/InternetProtocol.传输控制协议/网际协议)是用于计算机通信的一个协议族. TCP/IP协议 ...

  3. 01 http协议概念及工作流程

    一:HTTP协议 重要性: 无论是以后用webserverice ,还是用rest做大型架构,都离不开对HTTP协议的认识. 甚至可以简化的说: webservice = http协议+XML Res ...

  4. 关于成为Java高级工程师之路

    简单说明一下现状,个人目前学习使用java已经一年半,很迷茫,高不成低不就,在此列一个目标,为期18个月,再来个一年半,这样软件生涯三年后,我必须成为高级工程师! 这里涉及Java各个方面的知识,有的 ...

  5. 《Javascript DOM编程艺术》 读书笔记 —— 好书,通俗易懂!!!!! 相当的严谨!!!!

    1.javascript弱类型语言,解释性语言. 2.javascript数据类型:字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空( ...

  6. 一个java高级工程师的进阶之路

    宏观方面 一. JAVA.要想成为JAVA(高级)工程师肯定要学习JAVA.一般的程序员或许只需知道一些JAVA的语法结构就可以应付了.但要成为JAVA(高级) 工程师,您要对JAVA做比较深入的研究 ...

  7. JavaScript DOM编程艺术-学习笔记(第七章)

    第七章: 1.dom方法创建并且插入标签:(这种方法并没有改变文档的物理内容,而是在改变dom树) ①创建元素节点:createElement(); ②内部前插入:appendChild() ③创建文 ...

  8. Java高级工程师进阶路线

    第一部分:宏观方面 一. JAVA.要想成为JAVA(高级)工程师肯定要学习JAVA.一般的程序员或许只需知道一些JAVA的语法结构就可以应付了.但要成为JAVA(高级) 工程师,您要对JAVA做比较 ...

  9. 【转载】java架构师进阶之路

    Java架构师,应该算是一些Java程序员们的一个职业目标了吧.很多码农码了五六年的代码也没能成为架构师.那成为Java架构师要掌握哪些技术呢,总体来说呢,有两方面,一个是基础技术,另一个就是组织能力 ...

随机推荐

  1. LeetCode刷题笔记(3)Java位运算符与使用按位异或(进制之间的转换)

    1.问题描述 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 算法应该具有线性时间复杂度并且不使用额外空间. 输入: [4,1,2,1,2] 输 ...

  2. Flask解析(二):Flask-Sqlalchemy与多线程、多进程

    Sqlalchemy flask-sqlalchemy的session是线程安全的,但在多进程环境下,要确保派生子进程时,父进程不存在任何的数据库连接,可以通过调用db.get_engine(app= ...

  3. SpringBoot配置文件之Yml语法

    一 使用 YAML 而不是 Properties YAML是 JSON 的超集,因此,它是用于指定分层配置数据的便捷格式.只要 class 路径上有SnakeYAML library,SpringAp ...

  4. phpStorm //todo 的用途

    用phpstorm看到别人的代码使用了注释//todo,且todo是彩色的 我想这个应该是有点用的吧,于是百度了下,大概是可能由于某些原因,导致部分代码没有写.但又怕忘了, 用//todo就可以做提示 ...

  5. 第一个appium测试用例

    from time import sleep from appium import webdriver import pytest class TestXueqiu: user_profile_id ...

  6. Django学习day7——简单的使用数据库和模型

    Django支持的数据库 PostgreSQL SQLite 3 MySQL Oracle 其中SQLite 3不需要安装,因为SQLite使用文件系统上的独立文件来存储数据 这里我们用SQLite ...

  7. 设计模式之代理模式(Java)

    简介 代理模式出场率真的相当的高,几乎所有框架中无一例外都用到了代理模式,所以了解一下收益还是很高的. 代理模式是什么 如果用一句话来描述代理模式: 代理模式就是为其他对象提供一种代理以控制对被代理对 ...

  8. Python SQLAlchemy入门教程

    本文将以Mysql举例,介绍sqlalchemy的基本用法.其中,Python版本为2.7,sqlalchemy版本为1.1.6. 一. 介绍 SQLAlchemy是Python中最有名的ORM工具. ...

  9. synchronized和ReentrantLock锁住了谁?

    一.synchronized 案例1: public class LockDemo{ public static void main(String[] args) throws Exception { ...

  10. 格式工厂转化成mp4 avc格式 暴风影音不能播放的解决方法

    格式工厂转化成mp4 avc格式 暴风影音不能播放的解决方法  先转成其他mp4 确保能播放 然后再转成avc