HTTP服务&AJAX编程

Posted 2020-09-28 法门扫地僧

即 Asynchronous javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

传统方式我们是以表单形式与服务器通信的。

1.1   异步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

                       

 

现实生活中的一个例子

打电话时同步 发消息是异步

XMLHttpRequest可以以异步方式的处理程序。

1.2   XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

下面是一个简单的例子

 

由于XMLHttpRequest本质基于HTTP协议实现通信，所以结合HTTP协议和上面的例子我们分析得出如下结果：

1.2.1    请求

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

1、请求行

 

2、请求头

 

get请求可以不设置

3、请求主体

 

注意书写顺序

1.2.2    响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

 

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态

1、获取状态行（包括状态码&状态信息）

 

2、获取响应头

 

3、响应主体

 

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

1.2.3    API详解

xhr.open() 发起请求，可以是get、post方式

xhr.setRequestHeader() 设置请求头

xhr.send() 发送请求主体get方式使用xhr.send(null)

xhr.onreadystatechange = function () {} 监听响应状态

xhr.readyState = 0时，UNSENT open尚未调用

xhr.readyState = 1时，OPENED open已调用

xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息

xhr.readyState = 3时，LOADING 接收到响应主体

xhr.readyState = 4时，DONE 响应完成

不用记忆状态，只需要了解有状态变化这个概念

xhr.status表示响应码，如200

xhr.statusText表示响应信息，如OK

xhr.getAllResponseHeaders() 获取全部响应头信息

xhr.getResponseHeader(‘key‘) 获取指定头信息

xhr.responseText、xhr.responseXML都表示响应主体

注：GET和POST请求方式的差异（面试题）

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send(‘name=itcast&age=10‘)

4、POST需要设置

 

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制

问题？如何获取复杂数据呢？

1.2.4    XMLHttpRequest2.0

技术总是在实践中不断更新的，XMLHttpRequest也不例外

1、可以设置超时

2、支持FormData对象管理表单数据

3、支持二进制（文件上传）

4、支持上传进度

1.3   JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

1.3.1    语法规则

1、数据在名称/值对中

2、数据由逗号分隔(最后一个健/值对不能带逗号)

3、花括号保存对象方括号保存数组

4、必须要使用双引号

1.3.2    JSON解析

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

1、Javascript 解析方法

eavl()、JSON对象  JSON.parse()、JSON.stringify()；

JSON兼容处理json2.js

2、PHP解析方法

json_encode()、json_decode()

总结：JSON体积小、解析方便且高效，在实际开发成为首选。

1.4   兼容性

IE5、IE6中使用 ActiveObject("Microsoft.XMLHTTP")

如下图

 

关于IE的兼容方面，了解即可。

1.5   jQuery中的Ajax

jQuery为我们提供了更强大的Ajax封装

$.ajax({}) 可配置方式发起Ajax请求

$.get() 以GET方式发起Ajax请求

$.post() 以POST方式发起Ajax请求

$(‘form‘).serialize() 序列化表单（即格式化key=val&key=val）

url 接口地址

type 请求方式

timeout 请求超时

dataType 服务器返回格式

data 发送请求数据

beforeSend: function () {} 请求发起前调用

success 成功响应后调用

error 错误响应时调用

complete 响应完成时调用（包括成功和失败）

jQuery Ajax介绍

http://www.css88.com/jqapi-1.9/

第2章JSONP

2.1   JSONP

JSON with Padding

1、原理剖析

其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

只能以GET方式请求

2.2   jQuery中的JSONP

jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

dataType: ‘jsonp‘ 设置dataType值为jsonp即开启跨域访问

jsonp 可以指定服务端接收的参数的“key”值，默认为callback

jsonpCallback 可以指定相应的回调函数，默认自动生成

 

http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/