Ajax基础（上）

当我们在浏览器地址栏中输入一个网址，或者通过网页表单向服务器提交内容的时候，我们就开始与服务器进行交互。

传统的Web应用交互：

（1）用户触发一个Http请求到服务器，服务器对其进行处理后再返回一个新的HTML页到客户端。

（2）每次当服务器请求客户端提交的请求时，客户都只能空闲等待，哪怕只是一次很小的交互，只需从服务器得到很简单的一个数据，都要返回一个很简单的HTML页。

（3）而客户端每次都要浪费时间和带宽去重新读取整个页面。

Ajax即异步的JavaScript和XML(是一种标记语言，主要用来传递数据)，是一种实现无页面刷新获取服务器数据的混合技术，只不过以前客户端和服务器之间传递数据是用的XML，现在主要用的是JSON这种轻格

式的标记语言。

 

 客户端和服务器

CS/BS:软件使用上的两种划分

（1）CS:Client/Server 

PC客户端，服务器架构。

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

（2）BS:Browser/Server 。

浏览器，服务器架构。

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

Web资源

什么是Web？Web网页，表示网络主机上供外界访问的资源。

1）静态Web资源：指Web页面中供人浏览的数据始终不变。

2）动态Web资源：指Web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容是变化的。

Web资源放在哪里？

1）所有的Web资源都放在一个服务器当中，这个web服务器既可以是本地的，也可以是远程的，一般实际应用中都是远程服务器。

2）Web服务器就是可以供外界访问web资源的一个软件，即web服务器安装在远程服务器上，根据对应的端口访问它。

3）web资源放在指定的目录当中，就可以通过对应的端口在浏览器当中访问到。

URL地址

url地址=协议://主机地址:端口号/资源地址        http://www.itlike.com:80/index.html

主机地址可以理解为域名，每台电脑都会有个ip地址和其对应，域名通过dns和ip地址映射，这样我们就可以通过域名来访问这台电脑，然后再通过端口访问web服务器，没个web服务器有很多目录。

 

 上面两个例子说明，www.baidu.com和i.cnblogs.com域名对应的ip地址分别为：36.152.44.95和116.62.230.66

Web资源访问流程

1）客户端：浏览器，Android程序，Ios程序，微信小程序...

2）服务器：php服务器，tomcat服务器，nodejs服务器...

3）思考：当我们在浏览器输入一个网址的时候为什么就能看到一个页面？

一个网址对应的就是一个ip地址，一个ip地址对应着一台电脑，通过ip地址找到对应的电脑，电脑当中安装有Web服务器，通过端口号找到对应服务器；找到对应服务器，服务器把页面返回给你，

这样的一个过程就是http请求的过程。

请求与响应

1）请求：把客户端请求发送给服务器

2）响应：服务器把你想要的数据发送给客户端

 请求和响应都需要一定的格式：约定好客户端以什么样的格式把数据给服务器，约定好服务器以什么样的格式把数据给客户端，这个约定使用的就是Http协议。

Http协议

超文本传输协议，是互联网上应用最为广泛的一种网络协议，所有的www文件都必须遵守这个标准,设计http最初的目的是为了提供一种发布和接收HTML面的方法。

请求的发送方式：通过浏览器的地址栏、通过html的form表单、通过a链接的href、src属性。

Http协议的组成：包括请求和响应，请求和响应都是成对存在的，没有请求就没有响应。

当在浏览器中输入某个网址访问某个网站的时候，你的浏览器会将请求封装成一个Http请求发送给服务器站点，服务器接收到请求后会组织响应数据封装成一个Http响应返回给浏览器。

输入一个网址，可以看到请求和响应过程。

 （1）Http请求

   组成部分：请求行、请求头、请求体(POST请求才会有请求体)

   请求方式：GET、POST

   请求的资源：/node/form.html?username=myxq&pwd=1234

 

（2）Http响应

Http响应组成：响应头、响应行、响应体

响应行：主要要知道状态码

200：请求成功

302:请求重定向

304：请求资源没有改变，访问本地缓存。

404：请求资源不存在，通常是用户路径编写错误，也可能是服务器资源已删除。

 500：服务器内部错误，通常程序抛异常。

响应体：响应体是服务器回写给客户端的页面正文，浏览器将正文加载到内存，然后解析渲染显示页面内容。

 常用请求方式：GET和POST

 

 接下来就可以学习如何使用Ajax了，所需要的工具包括：客户端浏览器（这个已经有了）、web服务器（需要单独配置）

配置node服务器

1）安装node 

链接：https://pan.baidu.com/s/1ccEn1jUnLSyTu9tvca4QPg

提取码：uedr

测试是否安装成功，执行：

node -v   

npm -v

 有上述提示表示安装成功

2）在联网的基础上安装express 

执行 npm install -g express

执行 npm install -g express-generator     必须安装这个,不然创建express项目的时候会提示express命令没有找到

执行 express  -V

最后基于node创建一个web服务器，首先进入到某个目录下，例如：E:\学习资源\撩课学院Ajax\撩课-面向对象 游戏\撩课-面向对象+游戏\Day27-网络请求-ajax\代码，这个目录下

执行 express myServer --view=ejs，其中myServer 这个名称可以任取

 

 然后在相应的目录下就会生成AjaxServer这个文件，然后还要按照提示安装下npm。

最后按照上面的提示，运行这个web服务器之后，客户端浏览器就可以访问这个服务器里面的资源了。

 最后，千万不能关闭,否则服务器也将会关闭。

最后，测试一下如何访问该服务器：在浏览器中输入localhost:3000,其中3000是安装服务器软件时的默认端口。

 如果想要离开，按ctrl+c

 最后，如果你是使用WebStorm，勾选Coding assistance for Node.js