AJAX-客户端服务器端通信
AJAX
客户端和服务器端的交互,是如何进行通信的。所有发请求建立连接这些事情,都跟代码没干系,都是浏览器帮我们发请求的;遇到link img script也是浏览器主动发请求做这件事情。
还有一部分信息并不是浏览器主动发请求的,得需要我们告诉浏览器怎么发请求,拿到数据之后我们自己去处理。
浏览器自动发请求:到此为止,页面有了结构、样式,还有一些js功能,但是页面上是没有数据的。但是数据是动态的,这些是需要我们单独向服务器发请求的。这次获取的不是页面而是数据。这就需要ajax。
ajax:客户端和服务器端交互的基本都是一样的,都是URL解析,dns解析,都要发送东西,都要接收返回结果。只不过这些是需要我们自己写代码请求然后自己写代码把数据绑定到页面上,拿到数据后你爱干嘛干嘛。ajax是客户端和服务器端的数据交互。
异步:定时器 事件绑定 promise 回调。js单线程事件循环&事件队列。
整个js异步编程的机制:eventloop 微任务和宏任务
什么是ajax
async JavaScript and xml
这里的异步和js中异步编程不一样。
这里的异步:指的是局部刷新
一个页面无非就是结构、样式、数据和我们实现的交互效果
服务器端渲染
全局刷新:浏览器拿到的就已经是有数据有结构的页面,浏览器只是渲染。
缺点:性能和体验比较差,服务器压力大
优点:
页面呈现速度快,没有所谓的加载,一次性拿到页面
有利于SEO搜索
客户端渲染
客户的使用体验会更好,减轻了服务器的压力
能实现数据的分批获取
所以当代项目开发的架构模型:
纯服务器渲染的;
混排模式:
+骨架屏 首屏内容为服务器渲染。
xml和json格式
HTML:超文本标记语言
XML:可扩展标记语言。用自己自定义标签来存储数据,在真实项目中的应用就是来存储数据的。比如xml配置环境,那些信息就是你们配置的数据。用xml来存储数据有自己的好处。
<?xml version="1.0" encoding="utf-8"?>
<root><student><name>angela</name><age>18</age><sex>1</sex><score><english>100</english></score></student><student><name>Tom</name><age>18</age><sex>1</sex><score><english>100</english></score></student></root>
</xml>
优点:层级非常清晰
缺点:
比如我要获取第1个student的score,我要student.score.englist,操作xml文档那种方式去获取,操作起来比较麻烦;
体积偏大,数据量偏大;
跟json的对比:
[{"name":"angela","age":18,"score":{"english":100,},
]
ajax四步操作
首先创建xhr实例,XMLHttpRequest语义:通过HttpRequest得到XML
配置请求信息
method
url
async
user-name
user-pass:服务器有可能去做域的判断,qq.com就正常返回,baidu.com就返回401
基于ajax拿到服务器返回的结果,监听状态改变
发送请求 xhr.send()
const xhr=new XMLHttpRequest();
xhr.open('GET','xxx');
xhr.onreadystatechange=function(){if(xhr.readyState===4 && /^(2|3)\d{2}&/.test.xhr.status){// xxxlet result=xhr.responseText;}
}
xhr.send();
http请求方式
get/post
get:从服务器获取内容
post:向服务器推送内容
get:拿得多,给得少
post:给得多,拿得少。我想服务器发送一堆东西,它告诉我好还是不好
get:
get 获取内容
delete 告诉点服务器删除点东西
head 只需要返回响应头,不需要响应体。
options 试探性请求。
post:
post
put 和delete对应。一般用于文件和大型数据
客户端《=》服务器
本质区别
是传递给服务器信息的方式的区别
get:query问号传参
post:body请求主体
请求头中经常放特殊信息。
从机制上:url有大小限制
比如IE是2KB,一个字母是一个B。只能有2000多个字符,超过就截断了。
get会产生缓存:
加random或时间戳
get相比较post来说不安全:
别人能劫持url信息获取并篡改,相对来说body不容易被劫持;
所以,
如果你要考虑安全,那么一定是post;
不考虑安全,就看给得多还是拿得多
ajax状态码
tip:打开html要保证是http/https协议,而不要是文件协议。
unsent: 0
opened: 1
headers_received: 2
响应头信息已经返回给客户端。服务器依次返回响应头->响应主体。
头的东西少
头里面有很多有意思的东西:
date: 服务器把响应头返回的那一刻的时间
etag: 协商缓存弱缓存
last-modified: 304缓存
cache-control: 强缓存
connection: keep-alive长连接
loading: 3 等待服务器返回响应主体
done: 4 响应主体已返回
插一句:对象+数字,对象先转换成数字,在过程中先转成字符串
new Date(): 转换成中国标准时间。(若在纽约那就是纽约标准时间,通过网段等信息)
服务器返回:
json不仅更加轻量级,更好操作更加清晰明了能看出结构
服务器返回给客户端的结果一般都是字符串,json格式字符串、html格式字符串、css格式字符串,……一般都是不同格式的字符串;当然也会返回流文件。response都能接收。
const xhr=new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('GET','http://jsrun.net/res/css/img/helloworld_1.jpg');
console.log(xhr.readyState);
xhr.onreadystatechange=function(){console.log('==='+xhr.readyState);if(!(/^(2|3)\d{2}$/.test(xhr.status))) return;if(xhr.readyState===2){let serverTime=xhr.getResponseHeader('Date');console.log(new Date(serverTime));}if(xhr.readyState===4){console.log('===done')// responseXML// responseType// responseconsole.log(xhr.responseText)console.log(xhr.responseType)}
}
xhr.send();
// console.dir(xhr);
常用属性
readyState:状态码
responsexxx:响应信息
status:http网络状态码
statusText:http网络状态码描述
timeout:设置超时时间。从我发请求到服务器接收到服务器给我,需要一段时间。
const xhr=new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('GET','http://jsrun.net/res/css/img/helloworld_1.jpg');
console.log(xhr.readyState);
// 超时
xhr.timeout=1;
xhr.onreadystatechange=function(){if(xhr.readyState===4){// xxx// responseXML// responseType// response}
}
xhr.ontimeout=function(){ xhr.abort();alert('request timeout');}
xhr.send();
console.dir(xhr);
withCredentials:跨域请求时是否允许携带cookie(证书)
事件
onreadystatechange
ontimeout
方法
open
send
abort
getResponseHeader/getAllResponseHeaders
setRequestHeader('xxx', 'xxx');
overrideMimeType
ajax的同步异步编程
之前的js的同步异步:浏览器是多线程,但是只分配了一个线程来渲染和解析js。所以js是单线程的
ajax的异步:
xhr.send() => 浏览器会开一个新的线程去请求服务器接收数据
这个就是ajax的异步
发送请求后会经历3个状态的改变:
同步:
只有状态码为4时才算任务结束,主线程才有空闲去做其他事情
AJAX-客户端服务器端通信相关推荐
- Netty 客户端服务器端通信 demo
服务端 package com.demo.rpc.netty;import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.*; ...
- 北风网ajax,[T8:JavaScript中利用Ajax实现客户端与服务器端通信北风网收费视频讲座.ppt...
[T8:JavaScript中利用Ajax实现客户端与服务器端通信北风网收费视频讲座 Ajax简介 XMLHttpRequest对象 综合案例 1.HTTP请求 现在,很多浏览器都可以直接从JavaS ...
- java socket通信 客户端_JavaのSocket编程之简单客户端与服务器端通信
Socket编程之简单客户端与服务器端通信 socket 通常用来实现客户端和服务端的连接,socket 是Tcp/Ip协议的一个十分流行的编程界面,一个socket 由一个Ip地址和一个端口号唯一确 ...
- 安卓应用开发Socket通信 客户端+服务器端
安卓应用开发Socket通信 客户端+服务器端 1. 添加网络权限 <uses-permission android:name="android.permission.INTERNET ...
- C#+Socket 聊天室(实现公网通信 客户端-服务器端-客户端)
文章目录 简述 功能演示视频(b站) 准备工作 服务器端 服务器端界面 服务器端代码 客户端 客户端界面 客户端代码 总结 简述 关于Socket的原理我就不在这里赘述了,有大佬已经作详细的说明了: ...
- Socket实现服务器端与客户端之间通信(输入文字聊天)
用Socket实现服务器端与客户端之间通信 需求: 键盘输入文字使服务器端与客户端可以实现文字通信. 使用的是TCP协议. TCP协议 客户端 创建Socket连接服务端(指定ip地址,端口号)通过i ...
- 服务器客户端通信原理,客户端到服务器端通信原理
我们首先要了解一个概念性的词汇:Socket socket的英文原义是"孔"或"插座".作为进程通信机制,取后一种意思.通常也称作"套接字" ...
- AngualrJS之服务器端通信
译自<AngularJS> 与服务器通信 目前,我们已经接触过下面要谈的主题的主要内容,这些内容包括你的Angular应用如何规划设计.不同的angularjs部件如何装配在一起并正常工作 ...
- 网络通信——客户端服务器端交互
网络通信 网络通信 前后端数据交互:同源策略请求ajax & fetch:跨域策略请求:jsonp & cors domain: 客户端:发请求的 服务器端:接收请求的.在电脑上建立服 ...
最新文章
- Java实现字符全阵列阵列
- UVA10943简单递推
- 2021年Q2:全球超大规模数据中心数量增至659个
- 两个listmap合并去重_Excel 二维表,相同行标题的多个值各占一行,如何合并为一行?...
- 阿里云服务器如何选配?
- ajax option请求后无post请求_ThingJS:一种浏览器、服务器和技术的新组合方法——Ajax...
- selenium在eclipse中的使用(详细介绍)
- 【Elasticsearch】ELASTICSEARCH集群节点的扩容(移除与添加)
- maven setting 设置jdk版本
- spring简易学习笔记四(jdbcTemplate和事务控制)
- VB.net取整和模操作
- win7计算机添加用户名和密码错误,Win7家庭组如何创建共享及其密码错误怎么办?...
- MacOS壁纸文件夹如何查找
- Linux ——vi / vim 新建文件vi abc.txt 、编辑文件 i、退出编辑 esc、保存文件:wq、打开文件所在目录 open . 、使用命令打开文件 open ./abc.txt。
- 自己动手写Spring-1-简单的IOC实现
- Flex布局-实现网上商城-个人中心页面
- 支付平台服务器被攻击怎么应对?
- 嵌入式 独立看门狗实验
- (笔记整理)VUE初识
- 企业微信审批页面HTML,企业微信审批模板调用示例及注意事项