AJAX回顾

最新推荐文章于 2023-02-07 17:35:12 发布
最新推荐文章于 2023-02-07 17:35:12 发布
阅读量187 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42199147/article/details/100545374
版权

HTTP协议

  1. URL
    结构
    协议+主机名称+目录结构+文件名
    http://cdn.tmooc.cn/bsfile/imagad/A.jpg
    完整url结构
 <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>

scheme:方案，协议。以哪种方式获取服务器资源,不区分大小写，常见的协议http/https/ftp

常见协议默认端口号协议基本作用
FTP21文件上传、下载
SSH22安全的远程登录
TELNET23远程登录
SMTP25邮件传输
DNS53域名解析
HTTP80超文本传输
POP3110邮件接收
HTTPS443加密传输的HTTPS

DNS FTP HTTP/HTTPS
< user>用户名
< pwd>密码
host： 主机名localhost 、127.0.0.1/域名、IP
port:端口号
path:路径
params：参数，session/cookie 跟踪状态的参数
query:查询字符
frag:锚点 01.html#NO1

  1. HTTP协议
    （1）什么是HTTP协议
    HyperText Transfer Protocol 超文本传输协议
    规范了数据是如何打包的
    （2）HTTP历史
HTTP/0.91991年制定，有严重的设计缺陷，只支持GET方法，不支持MIME类型，很快被HTTP/1.0取代
HTTP/1.01996年制定，支持多种请求方法，支持多媒体对象，得到广泛应用。
HTTP/1.0+支持持久连接，虚拟主机、代练连接等新特性，成为非官方的事实标准。
HTPP/1.11999年制定，矫正HTTP中设计缺陷，性能优化，删除一些不好的特性。
HTTP-NG（或HTTP/2.0）关注HTTP协议的性能优化及更强大的服务逻辑远程执行框架，研究工作仍在进行中

（3）详解
Message，消息/报文，是在HTTP客户端与服务器间传递的数据块。
HTTP协议规定，消息必须符合特定的格式才能被彼此理解。
Request Message：客户端向服务器发送的请求消息。
Response Message：服务器端根据客户端的请求消息，返回给客户端的响应消息。

HTTP的消息

Request请求消息
是客户端带给服务器的数据
由三部分组成，请求起始行，请求头，请求主体
Response响应消息
服务端发送给客户端的数据
由三部分组成，响应起始行，响应头，响应主体

Request请求消息

请求起始行

  • get：客户端向服务器要数据时使用，靠地址栏明文传输字符串，无请求主体（form data）
  • post：客户端向服务器提交数据的时候使用，隐式传输，有请求主体form data
  • delete：客户端想要删除服务器内容（一般禁用）
  • put：客户端想要放数据到服务器（一般禁用）
  • connect：测试连接
  • trace：追踪请求路径
  • option：选项，预请求
  • head：表示客户端只获取响应头信息

（2）请求的url
（3）协议版本 HTTP/1.1

请求头信息

  • Host：告诉服务器请求的主机
  • Connection:keep-alive：告诉服务器，进行持久连接
  • User-agent：用户代理，告诉服务器，我自己（浏览器）的类型
  • Accept-Encoding：gzip，告诉服务器，自己能接收的压缩文件的类型
  • Accept-Language：zh-CN，zh。告诉服务器，自己能够接收的自然语言类型。
  • Referer：引用。告诉服务器，请求来自于哪个网页。

请求主体
form data

Response响应消息

（1）响应起始行
1.http协议版本 http/1.1
2.响应状态码
3.原因短句，对状态码的简短的解释说明

（2）响应头信息
1.Date:告诉浏览器，服务器的响应时间点
格林威治时间 北京+8小时
2.Connection:keep-alive;
告诉浏览器，已经启动了持久连接
3.Content-Type:响应主体类型是什么
取值
text/html 响应回来的数据是html文本
text/plain 响应回来的是普通文本(不包含特殊符号)
text/css 响应回来的是样式文件
application/javascript 响应回来的js脚本文件
application/xml 响应回来的是xml格式的字符串
application/json 响应回来的是json格式的字符串
images/jpg.png… 响应回来的是图片

（3）响应主体

响应状态码

告诉浏览器，服务器的响应状态是什么
1XX:100-199 提示信息
2XX:成功响应 200 ok
301:永久重定向
302:临时重定向
304:请求未被修改，命中缓存
4XX:客户端请求错误
       404 NOT Found 请求资源不存在
       403 Forbidden 权限不够
       405 Method not Allowed 请求方法不被允许
5XX:服务器运行错误
        500 服务器内部错误

缓存

客户端将服务器响应回来的数据进行自动保存
当再次访问的时候，直接使用保存的数据
缓存的优点和缺点
1.减少了冗余数据的传输，节省客户端流量
2.节省了服务器带宽
3.降低了对服务器资源的消耗和运行要求
4.降低了由于远程传输而造成的延时加载

在这里插入图片描述
在这里插入图片描述

1.请求–无缓存–连服务器–存缓存–客户端得到
2.请求–有缓存–够新鲜–使用缓存–客户端得到
3.请求–有缓存–不新鲜–连接服务器查看是否过期–没过期–更新缓存的新鲜度–客户端得到
4. 请求–有缓存–不新鲜–连接服务器查看是否过期–已过期–连服务器–存缓存–客户端得到

与缓存相关的消息头

1.Cache-Control http/1.1的用法
与缓存相关的消息头
1.Cache-Control http/1.1的用法
从服务器将文档传到客户端计时器，
此文档处于新鲜的秒数，是一个相对时间
max-age=新鲜的秒数/0 不缓存
2.Expires http/1.0的用法
指定过去的确切时间点，是一个具体的时间点
Expires:Tue,31 Jul 2019 02:56:16 GMT;

在网页中添加缓存
<meta http-equiv="消息头" content="值">
<meta http-equiv="Cache-Control" content="max-age=3600">
HTTP性能优化

1.HTTP连接的过程
发送请求—>建立连接—>处理请求—>访问资源—>构建响应—>发送响应—>记录日志
2.HTTP连接性能的优化
减少连接的创建次数(开启持久连接)
减少请求次数
提高服务器端运行速度
尽可能减少响应数据的长度

安全的HTTP协议

HTTPS协议，安全版本的HTTP
SSL，为数据通信提供安全支持
1.客户端发送请求消息时，在ssl层加密
服务器接收加密文件，在ssl层解密
得到请求明文，对请求进行处理
2.服务器发送响应消息时，在SSL层进行加密
客户端接收加密文件，在SSL层进行解密
得到响应明文，解析相应内容

DOM操作

完整的JavaScript的组成

1.js核心：ECMA Script ES5~ES6
2.DOM：Document Object Model 文档对象模型
让js动态操作页面元素
3.BOM：Browser Object Model 浏览器对象模型
让js动态操作浏览器

简化的获取元素对象
var elem1=document.getElementById("d1"); H5支持直接使用id表示标签对象
获取/修改双标签的内容

console.log(d1.innerHTML)
d1.innerHTML=""

获取/修改input标签的值

t1.value

总结

dom操作标签内容（简化版）的总结
1.要操作的标签，必须有id
2.通过id直接调用innerHTML或者value属性
双标签 id.innerHTML
input标签 id.value

HTML元素的事件

允许通过用户的行为来激发的操作就是事件
onclick
文本框或者密码框失去焦点的事件 onblur
文本框或者密码框获取焦点的事件 onfocus

Ajax

  1. 名词解释
    （1）同步Synchoronous
    在一个任务进行中时，不能开启其它任务。
    同步访问：浏览器向服务器发送请求时，浏览器只能等待服务器的响应，不能做其它的任何事情
出现场合
地址栏输入网址访问网页（网速不好时，更明显）
用户名的验证
聊天室
  1. 异步Asynchronous
    在一个任务开启时，可以开启其他的任务。
    异步访问：浏览器在向服务器发送请求时，不耽误用户在网页的其他操作
出现场合
用户名的验证
聊天室
搜索建议
股票走势图
  1. Ajax

Asynchronous javascript and Xml(现在使用json居多)
本质：使用js提供的异步对象(XMLHttpRequest)
异步向服务器发送请求，并接收响应回来的数据。
ajax可以无刷新的效果更改页面的布局内容

  1. 异步请求的步骤
    （1）创建异步对象
    （2）绑定监听事件（接收请求）
    （3）打开链接（创建请求）
    （4）发送请求

  2. 创建异步对象
    标准创建 ie8以上的版本支持的创建方式
    var xhr=new XMLHttpRequest();
    IE8以下版本创建
    通过判断window.XMLHttpRequest来判断浏览器是否支持标准创建

if(window.XMLHttpRequest){
  var xhr=new XMLHttpRequest();
}else{
 var xhr=new ActiveXObject("Microsoft.XMLHttp");
}
  1. 异步对象的属性和方法
    （一）readyState属性
    值0~4，5个状态
  • 0：请求未初始化
  • 1：已经打开到服务器的连接，正在发送请求
  • 2：接收响应头
  • 3：接收响应主体
  • 4：响应数据接收成功

（二）status服务器的响应状态码
当status的值为200时，表示服务器正确处理了请求，并给出了响应

（三）onreadystatechange
当xhr对象的readyState属性值发生改变时自动的激发

xhr.onreadystatechange=function(){
 //此方法会被调用4次
 //最后一次，readyState==4
 //并且响应状态码为200时，才是我们要的响应结果 xhr.status==200
  if(xhr.readyState==4 && xhr.status==200){
   //把响应数据存储到变量result中
   var result=xhr.responseText;
   }
}
  1. 创建请求，打开连接

xhr.open(method,url,isAsyn);
method:请求的方法（get/post…），一个string格式
url：访问的服务器的地址（接口），string
isAsyn:是否采用异步的方式请求 boolean (true异步/false同步)

  1. 发送请求
    xhr.send(body)
    使用get方法，body为null，或者不写
    使用post方法，要创建请求主体

  2. 使用get，发送带参数的请求

常见错误总结

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
跨域错误，页面是在本地打开，要使用访问服务器的方式打开
127.0.0.1:3000/**.html

AJAX发起post请求

第一步获取ajax异步对象，与get一样
var xhr=new XMLHttpRequest();
第二步绑定监听，获取响应数据，与get一样
xhr.onreadystatechange=function(){
if(xhr.readyState==4&& xhr.status == 200){
var result=xhr.responseText;
alert(result);
}
}

第三步，创建请求，打开连接。
post不需要在url后面拼接参数，所以，直接写接口
var url="/demo/postlogin";
xhr.open(“post”,url,true);

第四步，发送请求，注意:post的参数放在请求主体中，需要先定义请求主体
var formdata=“uname=”+uname.value+"&upwd="+upwd.value;
请求主体的格式，与get方法，地址栏中?后面的格式一致
uname=dangdang&upwd=123456
注意*******：由于默认的请求参数类型是text/plain，要求参数是没有特殊符号的字符。但是主体中有特殊符号"&"，text/plain传递不了，需要把content-type修改成application/x-www-form-urlencoded，支持所有字符
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xhr.send(formdata);
注意:setRequesetHeader必须在xhr的open方法与send方法之间

JSON数据格式

JS对象数据格式

var 对象名称={
属性1:值，
属性2:值,
属性3:值
}
var stu={
name:‘tom’,
age:18,
height:175
}

JSON数据的格式

什么是json
javascript object Notation
js 对象 表现形式
以js对象的数据格式表示出来的字符串
服务器查询数据库得到result是js对象数组
响应传输给前台ajax后，被自动转换成json字符串

Json的语法
1.JSON中用一对{}表示一个对象
2.json中的属性名称，必须使用"“引起来(不要用单引号)
如果属性的值也是字符串，也必须使用”"引起来
3.表现出来的是一个字符串，所有最外面加引号(使用单引号)

普通的字符串
var tom=“汤姆”;
var jsontom=’{“name”:“tom”,“age”:18}’;
普通数组
var arr=[“tom”,“lilei”,“hanmeimei”];
var jsonarr=’[
{“name”:“tom”,“age”:18},
{“name”:“lilei”,“age”:20},
{“name”:“hanmeimei”,“age”:21}
]’;

将JSON字符串转换成js对象/数组
使用JSON.parse()将json字符串解析成js对象或者数组

XML

XML: eXtensible markup language
可扩展的 标记 语言
XML的标签，是没有被预定义过的，需要自行定义
XML的宗旨，是做数据传递用的。而不是数据展示

XML标记的语法
1.xml文件最顶端做声明

<?xml version="1.0" encoding="utf-8"?>

2.所有的标记必须成对出现(没有单标记)

<name></name>正确
<name/>错误

3.严格区分大小写

<Name></Name>正确
<Name></name>错误

4.xml允许嵌套，注意嵌套顺序

<student>
 <name>TOM</name>
 <age>18</age>
</student>

5.每个标签允许自定属性，格式与html一致，属性值，必须使用“”括起来

 <name type="EN">TOM</name>

6.每一个xml文档，有且只有一个根元素

ajax请求xml数据

var result=xhr.responseXML获取xml文件
result等同于根目录(studentlist)
var students=result.getElementsByTagName(“下一级标签”);
getElementsByTagName的返回值是类数组，可以使用for循环操作
返回值只能用for循环操作，但是数组所有的api都不能用

misTgone
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX见解
L691321的博客
05-08 344
AJAX实例 1.什么是AJAX? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 XMLHttpRequest 是 AJAX 的基础。 创建XMLHttpRequest: //创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); XMLHttpRequest 对象用于和
AJAX
BothsHand博客
12-05 309
1.ajax(asynchronous javascript and xml)  asynchronous:异步地 (1)ajax是什么? 是一种用来改善"用户体验"的技术，其实质是 利用浏览器内置的一个特殊对象(XMLHttpRequest, 即ajax对象)异步地向服务器发送请求，服务器返回 部分数据(一般不需要返回完整的页面)，浏览器利用 这些数据对当前页面做局部更新。整个过程
nginx应用及优化
m0_69601030的博客
02-07 224
写文件时，客户端将文件写至group内的一个storage server即认为写入成功，storage server写完后将由后台线程将文件同步到group内的其他storage server，实现原理是：每个storage 写文件后会同时写一份binlog，binlog不包含数据，只包含文件名等元数据，这份binlog用于后台同步，storage 会记录group内其他的storage 同步进度，一遍重启后能衔接上次的同步进度继续同步，进度以时间戳的方式记录，所以最好保证集群内的server时间一致。
tmooccn达内登录_达内上线技术学习平台TMOOC.CN，由线下反攻线上，O2O是在线教育的出路？...
热门推荐
weixin_39768444的博客
12-20 1万+
3月17日，达内宣布上线达内精品在线平台—— TMOOC.CN，将原有线下的老师、教学和课程资源搬到线上，围绕着IT教育打造一个O2O的技术学习平台。为什么是一个 O2O 的技术学习平台？TMOOC.CN 上共有 4 种不同类型的课程，分别是技术课程、职业课程和就业课程。目前除了技术课程是以在线录播课程和答疑方式之外，其余都借助了达内原先在线下积累的教育资源。职业课程提供了线下串讲功能，在线下培...
Nginx地址重写
jsut_rick的博客
08-08 2299
地址重写 地址重写，获取一个来访的URL请求，然后改写成服务器可以处理的另一个URL的过程 功能:www.baidu.com------&gt;https://www.baidu.com 优点：缩短URL，隐藏实际路径，提高安全性；   易于用户记忆和键入；易于被搜索引擎收录 常见网站应用场景： 当网站文件移动或文件目录名称发现改变，出于SEO需要，你需要保持旧的URL 网站改版了，...
unix文件内核结构、进程、信号集、管道、IPC、线程概述
weixin_46271371的博客
07-15 1026
unixC编程#入门
python学习网址汇总
YangYuanhua1988的博客
01-17 1082
网址如下: 菜鸟: https://www.runoob.com/ javascript: https://js1k.com/2010-first/ github: https://github.com/ jquery: http://www.jq22.com/jquery-info122 Bootstrap: https://v3.bootcss.com/css/#over...
jQuery_ajax内容回顾
07-16
在本文中，我们将深入探讨jQuery中的Ajax技术，它是JavaScript库的一个强大特性，允许我们在不刷新整个页面的情况下与服务器进行交互。Ajax（异步JavaScript和XML）在jQuery中得到了简化，提供了多种方法来处理不同...
最简单ajax
07-30
### 最简单 AJAX 实现原理与应用 #### 一、引言 在当今互联网技术日新月异的发展背景下，Ajax（Asynchronous JavaScript and XML）作为一项关键的前端技术，被广泛应用于提升网页应用的交互性和用户体验。本文将...
AJAX进阶教程
01-13
### 一、AJAX 基础回顾 1. **异步通信**：AJAX 的核心是通过JavaScript创建XMLHttpRequest对象，实现后台与服务器的异步数据交换。这种方式让页面在用户看来始终处于活动状态，不会因为等待服务器响应而冻结。 2. ...
ajax基础教程
03-14
本篇教程不仅回顾了浏览器的发展历程，还详细介绍了Web应用如何从静态页面发展到使用CGI技术实现动态内容展示的过程。进一步地，引出了AJAX这一关键技术的概念及其在现代Web开发中的重要作用。通过了解AJAX的工作...
nginx修改请求path
风烟
11-12 4570
问题背景 有时候我们想把abc的路径修改为实际请求的是/def这个路径 我们就可以这样写，利用rewrite来实现 解决方案 改path location ^~ /abc { rewrite ^/abc$ /def break; proxy_pass http://aaa.com; } 也可以进行地址拼接转换 server { location ^~/v1/ { rewrite ^/v1/(.*)$ /$1 break; proxy_pas
LNMP+FastCGI
weixin_34247299的博客
06-30 122
静态网站：客户端要什么，服务器找什么，找到直接返回给客户端动态网站：客户端访问网站，服务器找到页面，并识别页面是脚本，就把此脚本执行，然后把执行结果返回给客户端LNMP（linux+nginx+mysql+php）1、装包nginxmariadb（连服务端的客户端软件，方便服务器端自己查数据）、mariadb-server（存数据的服务器）、mariadb-d...
html中如何重定向域名,域名如何进行重定向
weixin_35092037的博客
06-05 1075
何为地址重写，域名如何进行重定向？地址重写，获取一个来访的URL请求，然后改写成服务器可以处理的另一个URL的过程功能:www.baidu.com------>https://www.baidu.com优点：缩短URL，隐藏实际路径，提高安全性；易于用户记忆和键入；易于被搜索引擎收录常见网站应用场景：当网站文件移动或文件目录名称发现改变，出于SEO需要，你需要保持旧的URL网站改版了，网站导...
Web网站基础配置
A1323563583的博客
10-30 788
Web网站基础配置 需求：配置web网站服务,提供服务需求 1）网页资源要求存放到 /var/www/webroot/ 目录 2）新建网站首页 index.html，代码内容如下： <a href="http://tmooc.cn/">Hello Word !</a> 3）本机访问 http://127.0.0.1/ 时，页面显示“Hello Woed !”超链接...
ajax返回data:text/plain,导致ajax回调success不执行
hxl5u的专栏
05-14 5827
问题描述：正常情况下，ajax post返回的数据应该在response中(请求为异步时)，但是却有第二个,chrome中请求描述如下: name path | Method |　status | Type data:text/plain, post , Data , Document可能的原因分析 检查所有请求类型，响应类型，都已是json
LNMP动态网站
tian1345的博客
01-11 957
LNMP基础知识 什么是LNMP 主流的企业网站平台之一 L:Linux操作系统 N:Nginx网站服务软件 M:MySQL.MariaDB数据库 P:网站开发语言(PHP.Perl.Python) 静态网站和动态网站区别 静态网页： （1）静态网页不能简单地理解成静止不动的网页，他主要指的是网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者....
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
最新发布
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
Ajax技术解析与J2EE应用
在了解Ajax之前，文档首先回顾了Web应用的发展历程，指出现代Web应用面临的挑战和传统Web应用的不足，如页面跳转导致的数据丢失、用户界面的不连贯等。Ajax通过引入异步通信，使得用户可以在不打断当前操作的情况下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值