学无先后，达者为师

网站首页 前端文档 正文

JavaScript的异步ajax详解_javascript技巧

作者：抹泪的知更鸟   更新时间： 2022-05-05 前端文档

一级目录

二级目录

三级目录

1.掌握HTTP协议和规则

2.掌握HTTP请求和响应的规则 重点

3.了解HTTP响应头信息

4.了解HTTP状态码

5.掌握AJAX开发中使用的全过程 重点

6.掌握JavaScript JSON的数据结构和使用方法 重点

7.掌握JavaScript XML数据结构和使用方法

8.掌握AJAX获取JSON格式数据的方法

9.掌握JSON格式转换的方法

HTTP协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）

请求消息结构

HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：

  • 请求行（request line）
  • 请求头部（header）
  • 空行
  • 请求数据

下面给出了请求报文的一般格式:

GET / HTTP/1.1 
Host: www.csdn.net 
Connection: keep-alive 
Cache-Control: max-age=0 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Referer: https://www.csdn.net/ 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: zh-CN,zh;q=0.8 
Cookie: uuid_tt_dd=-6852503192799459486_20161230; _ga=GA1.2.851452765.1483110024; UE="starzhangkiss@qq.com"; __guid=253029775.837108528115350700.1516453692677.6106

请求方法

方法 描述
GET 请求指定的页面信息，并返回实体主体。数据被包含在URL参数中
POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。
HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
PUT 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE 请求服务器删除指定的页面。
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS 允许客户端查看服务器的性能。
TRACE 回显服务器收到的请求，主要用于测试或诊断。

响应头信息

HTTP/1.1 200 OK

Server: Tengine

Content-Type: text/html

Content-Length: 15154

Connection: keep-alive

Date: Fri, 27 Apr 2018 02:49:12 GMT

X-Powered-By: HHVM/3.11.1

Content-Encoding: gzip

Vary: Accept-Encoding

Via: cache40.l2et2-2[0,200-0,H], cache3.l2et2-2[1,0], cache1.cn548[0,200-0,H], cache4.cn548[1,0] Age: 35292

X-Cache: HIT TCP_HIT dirn:7:245100152 mlen:-1

X-Swift-SaveTime: Fri, 27 Apr 2018 12:24:58 GMT

X-Swift-CacheTime: 86400 Timing-Allow-Origin: *

EagleId: dbee144415248326444025049e

响应字段类型

应答头 说明
Allow 服务器支持的请求方法（如GET、POST等）。
Content-Encoding 文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。
Content-Length 内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。
Content-Type 文档MIME类型
Date 当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。
Expires 应该在什么时候认为文档已经过期，从而不再缓存它？
Last-Modified 文档的最后改动时间。
Location 表示客户应当到哪里去提取文档。
Refresh 表示浏览器应该在多少时间之后刷新文档，以秒计。
Server 服务器名字。由Web服务器自己设置。
Set-Cookie 设置和页面关联的Cookie。
WWW-Authenticate 客户应该在Authorization头中提供什么类型的授权信息？

响应状态码

分类 分类描述
1 信息，服务器收到请求，需要请求者继续执行操作（收到信件，还没看）
2 成功，操作被成功接收并处理（收到，并且看过了）
3 重定向，需要进一步的操作以完成请求（转达信息给第三者）
4 客户端错误，请求包含语法错误或无法完成请求（发不出去）
5 服务器错误，服务器在处理请求的过程中发生了错误（对方出错【代码错误】）

详细状态码列表

状态码 中文描述
200 请求成功。一般用于GET与POST请求
201 已创建。成功请求并创建了新的资源
202 已接受。已经接受请求，但未处理完成
204 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
301 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
400 客户端请求的语法错误，服务器无法理解
401 请求要求用户的身份认证
403 服务器理解请求客户端的请求，但是拒绝执行此请求
404 无法找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
408 服务器等待客户端发送的请求时间过长，超时
411 服务器无法处理客户端发送的不带Content-Length的请求信息
415 服务器无法处理请求附带的媒体格式
500 服务器内部错误，无法完成请求

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript【JSON】 和 XML）。

  • AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
  • AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest对象

XMLHttpRequest 是AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法说明

方法 描述
open(method,url,async) method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
setRequestHeader(header,value) 向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值
send(string) 将请求发送到服务器。string：仅用于 POST 请求

XMLHttpRequest响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

XMLHttpRequest响应状态

readyState 属性存有 XMLHttpRequest 的状态信息。

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 0: 请求（未初始化）还没有调用send()方法 1: 请求连接已建立（载入）已调用send()方法，正在发送请求 2: 请求已接收（载入完成）send()方法执行完成，刚刚接收到全部响应内容 3: 请求处理中（交互）正在解析响应内容 4: 请求已完成（完成）响应内容解析完成
status|statusText 200: “OK” 400无法找到资源 404:未找到页面 500：服务器内部错误 
xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		getResponseHeader("headerLabel");
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}

案例01

weather.json

{
    "status": 200,
    "data": {
        "wendu": "29",
        "ganmao": "各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。",
        "forecast": [
            {
                "fengxiang": "南风",
                "fengli": "3-4级",
                "high": "高温 32℃",
                "type": "多云",
                "low": "低温 17℃",
                "date": "16日星期二"
            },
            {
                "fengxiang": "南风",
                "fengli": "微风级",
                "high": "高温 34℃",
                "type": "晴",
                "low": "低温 19℃",
                "date": "17日星期三"
            },
            {
                "fengxiang": "南风",
                "fengli": "微风级",
                "high": "高温 35℃",
                "type": "晴",
                "low": "低温 22℃",
                "date": "18日星期四"
            },
            {
                "fengxiang": "南风",
                "fengli": "微风级",
                "high": "高温 35℃",
                "type": "多云",
                "low": "低温 22℃",
                "date": "19日星期五"
            },
            {
                "fengxiang": "南风",
                "fengli": "3-4级",
                "high": "高温 34℃",
                "type": "晴",
                "low": "低温 21℃",
                "date": "20日星期六"
            }
        ],
        "yesterday": {
            "fl": "微风",
            "fx": "南风",
            "high": "高温 28℃",
            "type": "晴",
            "low": "低温 15℃",
            "date": "15日星期一"
        },
        "aqi": "72",
        "city": "北京"
    },
    "message": "OK"
}

效果展示

在这里插入图片描述

XML

XML 指可扩展标记语言（eXtensible Markup Language）。XML 被设计用来传输和存储数据。

XML 语法规则

  • XML 元素名和HTML不一样，没有固定的单词，需要自定义。
  • XML 必须包含根元素，它是所有其他元素的父元素，根元素标签名自定义。
  • XML 所有的元素都必须有一个关闭标签
  • XML 标签必须正确嵌套
  • XML 属性值必须加引号
  • XML 标签对大小写敏感。标签  与标签  是不同的

XML 声明文件的可选部分，如果存在需要放在文档的第一行，如下所示：

如：



    
        Harry Potter
        J K. Rowling
        2005
        29.99
    
    
        Learning XML
        Erik T. Ray
        2003
        39.95

XML 解析

下面的代码片段把 XML 字符串解析到 XML DOM 对象中

案例02

效果展示

在这里插入图片描述

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)。JSON 是存储和交换文本信息(传输)的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 中括号保存数组

JSON 值

JSON 值可以是：

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在中括号中）
  • 对象（在大括号中）
  • Null

如：

var json = {
    'array':[1,'你好',true],
    'number':123,
    'string':'hello',
    'boolean':true,
    'object':{
        'name':'张三',
        'pswd':123456
    }
}

JSON 文件

  • JSON 文件的文件类型是 “.json”
  • JSON 文本的 MIME 类型是 “application/json”

JSON 对象

可以使用点号（.）来访问对象的值，也可以使用中括号（[]）来访问对象的值

案例03：获取

效果展示

在这里插入图片描述

案例04：删除对象属性

可以使用 delete 关键字来删除 JSON 对象的属性

效果展示

在这里插入图片描述

JSON文件读取

var request = null;
if(window.XMLHttpRequest) {
	request = new XMLHttpRequest();
} else if(window.ActiveXObject) {
	request = new window.ActiveXObject();
} else {
	request("您的浏览器版本过低");
}
if(request != null) {
	request.open(method, file, true);
	request.send(null);
	request.onreadystatechange = function() {
		if(request.readyState == 4 && request.status == 200) {
			//console.log(request.responseText)
			callback(JSON.parse(request.responseText));
		}
	};
}

JSON解析

JSON.parse()：JSON字符串转JavaScript 对象

JSON.parse(text[, function])

参数说明：

  • text:必需，一个有效的 JSON 字符串。
  • function(key,value): 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

案例05

效果展示

在这里插入图片描述

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

服务端JSONP格式数据

如客户想访问 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。假设客户期望返回JSON数据：["customername1","customername2"]。真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

客户端实现 callbackFunction 函数



	
		
		JSONP 实例

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：


	
		
		JSONP 实例

总结

原文链接：https://blog.csdn.net/qq_51596354/article/details/123246866

相关推荐

栏目分类
最近更新
Copyright © 2025   AB教程网    免责声明
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
本站由    提供CDN加速