客户端与服务器（C/S架构与B/S架构）、AJax学习

文章目录

HTTP请求与服务器
- 客户端与服务器
- - 1.C/S架构与B/S架构
  - 2.web资源介绍
  - 3.资源访问流程
- HTTP协议
- - 1.什么是协议？
  - 2.什么是HTTP协议
  - 3.HTTP组成部分
  - 4.请求的发送方式
什么是Ajax技术
Ajax可以做什么？
伪造Ajax

HTTP请求与服务器

客户端与服务器

1.C/S架构与B/S架构

软件使用方式上两种划分，可以划分为CS、BS架构。
C/S（Client/Server）架构：PC客户端与服务器之间的架构。

特点：在服务器当中就主要是一个数据库，把所有的业务逻辑以及界面都交给客户端完成
优点：较为安全，用户界面丰富，用户体验好
缺点：每次升级都要重新安装，针对于不同的操作系统开发，可移植性差

B/S(Browser/Server)架构：浏览器与服务器之间的架构

特点：基于浏览器访问的应用，把业务层交给服务器来完成，客户端仅仅做界面的渲染和数据的交换
优点：只开发服务器端，可以跨平台、移植性很强
缺点：安全性比较低，用户体验较差

2.web资源介绍

什么是web？
WEB网页，它用于表示网络主机上供外界访问的资源。
Web资源分类
静态Web资源：指web页面中供人们浏览的数据始终是不变。
动态Web资源：指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同。
web资源存放在哪里？

所有的web资源都放在一个web服务器当中
web服务器就是可以供外界访问web资源的一个软件
web资源放到指定的目录当中，就可以通过对应的端口在浏览器当中访问到。

URL地址
http://www.it666.com:80/index.html
协议：//主机地址：端口号/资源地址

3.资源访问流程

客户端
浏览器、Android程序、iOS程序、微信小程序
服务器
php服务器、tomcat服务器、nodeJS服务器、…
在浏览器当中访问一个网址的时候，为什么就能看到一个页面？
1.一个网址对应的其实是一个IP地址

一个IP地址对应一台电脑
通过IP地址找到对应的电脑
电脑当中安装的有web服务器，通过端口号找到对应服务器

2.找到对应服务器，服务器把页面返回给用户
3.这样的过程称为http请求的过程

BS结构流程图
浏览器：

Html+css+js

服务器：
Web层：

servlet+jsp
Struts2
springMvc

Service层：

spring

Dao层：

Jdbc
DButils
Hibernate
Mybatis

数据库

mysql
Oracle
SQLServer

请求与响应
请求:把客户端请求发送给服务器
响应:服务器把你要的数据发送给客户端
请求与响应都要一定的格式:

约定好客户端以什么样的格式把数据给服务器
约定好服务器以什么样的格式把数据给客户端
这个约定使用的就是HTTP协议

HTTP协议

1.什么是协议？

约束双方规范的一个准则

2.什么是HTTP协议

HTTP，超文本传输协议（HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
所有的WWW文件都必须遵守这个标准
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
约束请求与响应的规则

3.HTTP组成部分

请求
响应
请求与响应都是成对存在的

4.请求的发送方式

1.通过浏览器的地址栏
2.通过html当中的form表单
3.通过a链接的href
4.src属性

什么是Ajax技术

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。（增强B/S的体验性）

B/S:未来的主流，并且会爆炸式的持续增长
产品链：H5+网页+客户端+手机端（Android、ios）+小程序

Ajax可以做什么？

利用AJAX可以做：

1.注册时，输入用户名自动检测用户是否已经存在。
2.登陆时，提示用户名密码错误
3.删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。…等等

伪造Ajax

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪造Ajax</title>
</head>
<body><script type="text/javascript">window:onload=function() {var myDate=new Date();document.getElementById('currentTime').innerText=myDate.getTime();};function loadPage() {var targetURL=document.getElementById('url').value;console.log(targetURL);document.getElementById("iframePosition").src=targetURL;}</script><div><p>请输入要加载的地址：<span id="currentTime"></span></p><p><input type="text" id="url" value="https://www.baidu.com/"><input type="button" value="提交" onclick="loadPage()"></p>
</div><div><h3>加载页面的位置：</h3><iframestyle="width: 100%;height: 500px" id="iframePosition"></iframe>
</div></body>
</html>

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery 不是生产者，而是大自然搬运工。

jQuery Ajax本质就是 XMLHttpRequest，对它进行了封装，方便调用！

jQuery.ajax(…)

部分参数：
url：请求地址 (常用)
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据 (常用)
contentType：即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”)
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局) (常用)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型 dataType：将服务器端返回的数据转换成指定类型
“xml”: 将服务器端返回的内容转换成xml格式
“text”: 将服务器端返回的内容转换成普通文本格式
“html”: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含 JavaScript标签，则会尝试去执行。
“script”: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
“json”: 将服务器端返回的内容转换成相应的JavaScript对象
“jsonp”: JSONP 格式使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

客户端与服务器（C/S架构与B/S架构）、AJax学习相关推荐

bs客户端跨服务器管理文件,bs架构客户端和服务器
bs架构客户端和服务器内容精选换一换 SSL(安全套接层,Secure Sockets Layer)是一种安全协议,目的是为互联网通信,提供安全及数据完整性保障.云容器实例支持上传SSL证书,在使 ...
bs架构的系统需要服务器吗,bs架构客户端和服务器
bs架构客户端和服务器内容精选换一换该操作指导安装工程师安装MRS集群所有服务(不包含Flume)的客户端.MRS针对不同服务提供了Shell脚本,供开发维护人员在不同场景下登录其对应的服务维护 ...
Android 架构之路 (1)-- Android 客户端与服务器的数据交互总结
前言: 本文总结了 Android 客户端与服务器进行交互时,采用RESTful API +Json的交互方式,针对不同的数据形式以及不同的解析方法,如有不足之处,欢迎指正. 文章目录 1. Andr ...
MySQL的客户端／服务器架构
以我们平时使用的微信为例,它其实是由两部分组成的,一部分是客户端程序,一部分是服务器程序.客户端可能有很多种形式,比如手机APP,电脑软件或者是网页版微信,每个客户端都有一个唯一的用户名,就是你的微信 ...
客户端获取服务器性能,客户端数量服务器性能
客户端数量服务器性能内容精选换一换当服务器A和服务器B同时挂载同一文件系统C时,在服务器A上传文件,服务器B同步此文件时存在延时,而单独上传至服务器B则没有延时.需要在两个服务器的挂载参数中增 ...
ifix虚拟服务器,ifix的客户端和服务器
ifix的客户端和服务器内容精选换一换介绍使用同一VPC内弹性云服务器ECS上的C# Redis客户端连接Redis实例的方法.更多的客户端的使用方法请参考Redis客户端.已成功申请Redis ...
cookie文件存放在服务器端,cookie存储在客户端还是服务器
cookie存储在客户端还是服务器内容精选换一换在很多集群架构中,集群成员的主要目的就是让集中式接口知道它能访问哪些节点,然后此中央接口通过一个两级调度为客户端提供服务,在PB到EB级系统中这个 ...
qt向服务器传输文字_Qt实现客户端与服务器消息发送
这里用Qt来简单设计实现一个场景,即: (1)两端:服务器QtServer和客户端QtClient (2)功能:服务端连接客户端,两者能够互相发送消息,传送文件,并且显示文件传送进度. 环境:VS20 ...
客户端和服务器的通信协议,客户端和服务器的通信协议
客户端和服务器的通信协议内容精选换一换华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. 在部署 ...