基础知识准备

基础知识准备

客户端和服务器端

​ 客户端和服务器架构，是最基本的互联网通信架构。

​ 客户端包括：桌面应用（C/S）、WEB应用（B/S）、移动应用等。对于我们开发来说客户端用来信息展示，在用户输入表单的时候：客户端一般做数据格式的校验

​ 服务器包括：web服务器、数据库服务器等。 对于我们开发来说服务器提供数据接口，服务器一般做的是数据的业务逻辑处理。

HTTP协议

​ HTTP协议是超文本传输协议。该协议规定了客户端和服务器传输交互的约定（协议）通过这个协议才可以让客户端和服务器正确的传输。

HTTP 协议发展简史

1. 最早版本是1991年发布的0.9版。该版本极其简单，只有一个命令GET。
2. 1996年5月，HTTP/1.0 版本发布，内容大大增加。
   任何格式的内容都可以发送。这使得互联网不仅可以传输文字，还能传输图像、视频、二进制文件。这为互联网的大发展奠定了基础。
3. 1997年1月，HTTP/1.1 版本发布，只比 1.0 版本晚了半年。它进一步完善了 HTTP 协议，一直用到了20年后的今天，直到现在还是最流行的版本。

HTTP 协议工作原理

HTTP协议工作于客户端-服务端架构上, 是一种请求应答式的.

浏览器(或其他客户端)作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。

HTTP协议格式

通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。

客户端发送给服务器的格式叫“请求协议”；

服务器发送给客户端的格式叫“响应协议”。

请求协议格式

请求行   例：GET /images/logo.gif HTTP/1.1，表示从/images目录下请求logo.gif文件。
请求头   例：Accept-Language: en（很多请求头）
空行     必须的，服务通过这个空行来区别出请求头和请求体
请求体   有时候也叫消息体，是可选的，get请求时无请求体，post请求会有。

浏览器向服务器发送请求时必须依据该格式，否则服务器无法识别。http协议中的请求行中可以有8种请求方法，但是目前为止，通用和大家都在用的只有两种：post请求和get请求。

---

响应协议格式

状态行；
响应头信息；
空行；
响应体(响应正文)。

认识URL

​ 我们用浏览器使用 HTTP 协议去访问网络。 但是有一点大家需要记住， 浏览器只是 web 客户端的一种。

• 可以这么说， 任何一个向 web 服务器发送求来获得应用程序的都是客户端。
• 浏览器作为一个比较特别的客户端，主要用于浏览网页内容并同其他 web 站点交互。
• 而一个更普通的客户端可以完成更多的工作，不仅可以下载数据， 还可以存储、操作数据， 甚至可以将其传送到另外一个地方或者传给另外一个应用。

你首先需要做的就是为程序提供一个有效的 web 网址， 这个 web 网站就是一个URL。我们先了解URL是什么？

URL 是Uniform Resource Locator的缩写， 中文叫：统一资源定位符。

浏览网页需要 URL， 这个 URL 就表示这个网页的地址。 这个地址用来在 web 上定位一个文档。如街道地址一样， URL 地址也有一些结构。

例如：http://10.192.0.1:8080/index.html

http就是协议，

10.192.0.1 就是IP地址（唯一的，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。）

8080 就是端口号，计算机用来提供服务的逻辑接口，（类比人的五官：每个小孔提供不同的功能 如：http服务是经过80端口提供。

知名端口：由操作系统占用的端口，这些端口我们不能监听，一般在前2000或3000编号的端口是系统专用的知名端口。

**自定义端口: 计算机总共有65536个端口(编号从0——65535)，除了知名端口外，其他的端口可以被第三方开发人员监听使用，但是一个端口同时只能提供一种服务，如果某个端口已经开启某个服务，则不能重复使用该端口。端口号越大，被占用的可能性越小。

GET和POST

注意区别就是请求数据的传送方式:

1.GET 方法

查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.asp?name1=value1&name2=value2

2.POST 方法

请求数据（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com

name1=value1&name2=value2

比较

项目	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

同步请求

相当于请求一次过后，要等到这次请求的响应后，才能继续下一次请求（或操作）。

异步请求

请求一次后，不需要等到这次请求的响应后，就可以进行其他请求（或操作）。

数据交换格式

​ 数据在服务器和客户端传输过程中只能传输特定的类型（例如字符串等），服务器提供的数据类型不一定是客户端想要的类型，所以这时候为了统一类型，出现了数据交换格式，就是说，通过数据交换格式，可以统一类型，使用字符串传输，格式统一。

​ 之前比较流行的数据交换格式是XML格式，由于XML格式的种种缺点，现在前段更流行使用 JSON。

​ JSON(Javascript Object Notation)：是一种轻量级的数据交换格式。

​ JSON是JS的一个子集，其格式和JS中的对象字面量语法一模一样 (只是属性名要用双引号)，只是JSON是字符串而已，我们需要通过以下方式进行转换。

​ 转换格式的过程又称为 序列化 和 反序列化。

​ 序列化：把JS对象字面量转换成JSON字符串的操作叫做序列化。使用JSON.stringify(JS对象);

​ 反序列化：把JSON字符串转换成JS对象字面量的操作叫做反序列化。使用JSON.parse(JSON字符串);

Ajax

概念

​ 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面，在加载新的网页的过程中，用户会有一个等待。降低了用户体验。

​ AJAX的出现就可以让网页进行部分更新。

​ 异步和同步：

​ Ajax的全称是Asynchronous JavaScript+XML ，Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加载，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

​ Ajax刚出生的时候，用的比较多的数据格式是XML，后来JSON数据格式更多的去替换了XML格式的数据。

工作原理

image

使用Ajax

​ AJAX的核心对象是 XMLHttpRequest, 这个对象在目前的所有浏览器都支持，只是IE6 和 IE5的写法不一样而已。使用AJAX一般按照下面 4个步骤 使用即可。

步骤1：创建XMLHttpRequest对象

​ 创建核心的XMLHttpRequest请求对象，Ajax编程都是通过这个对象来进行的。

​ 这个对象从IE5开始支持，后来各大浏览器都进行了跟进。IE7+和chrome、firefox写法一样，IE6以前的浏览器一种写法。实际开发中，一般使用如下的兼容写法。

var xhr = null;
  if(window.XMLHttpRequest) {
    //标准浏览器创建XMLHttpRequest对象的方式
    xhr = new XMLHttpRequest();
  } else {
    //IE5和IE6的创建方式
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

步骤2：调用open方法

/*调用open方法
* 参数1：请求方法，一般是get或post
* 参数2：请求是url
* 参数3：是否为异步。true表示异步，默认是true
*/
xhr.open("GET", "msg.json", true);

注意：

• URL相对于执行代码的当前页面（当然也可以使用绝对路径）；
• 调用 open() 方法并不会真正发送请求，而只是启动一个请求以备发送。
• 如果使用绝对路径,则一定要和当前页面的协议、主机和端口完全一致，否则会出现错误。

步骤3：监听请求状态(onreadystatechange)

xhr.onreadystatechange监听请求状态，根据状态来确定数据获得之后要做的事情。

xhr.readyState的值保存了xhr的状态。一共有5种状态，每个状态用1个整数来表示

• 0 未初始化。请求对象new出来了，但是还没有调用open方法
• 1 启动。 已经调用open，但是还没有调用send方法
• 2 发送。 已经send方法，但是还没有接收到相应
• 3 接收。 已经开始接收数据，但是还没有完全接收。
• 4 完成。 已经完全接收数据。

作为开发者，我们一般只关注 第4种 状态。

xhr.status的值保存了服务器响应的状态吗。

• 200: 响应正常（这就是我们最后想要的状态吗）
• 404: 找不到要访问的URL
• 500: 服务器方面的错误。

//监听状态
xhr.onreadystatechange = function () {
    // 如readyState的值为4，表示已经接收完数据，可以开始对数据处理。
    if(xhr.readyState == 4){
        // xhr.status 保存了服务的响应码，  200表示正常响应  
        if(xhr.status == 200){
          // xhr.responseText 以文本的形式响应结果 (我们比较常用的形式)
            alert(xhr.responseText);
        }
    }
}

步骤4：调用send方法发送请求

//send方法才是真的的发起网络请求。 参数：请求的时候向服务区传递的参数。 
xhr.send(null);

使用Ajax携带参数

​ 不同的请求方式，携带参数的方式不一样。

get请求携带参数

​ get请求携带的参数直接追加到url后面即可使用问好? 后面跟的就是参数，参数是以键值对的形式出现，多个参数之间用&连接。注意，参数中的中文必须要经过url编码。

var url = 'http://wthrcdn.etouch.cn/weather_mini?city='+encodeURI('深圳')+'&pwd='+pwdValue;

post请求携带参数

​ post请求的的参数是在send方法中携带，参数的格式必须是：xxx=XXX&yyy=YYY格式。并且需要添加头部信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send('user='+ encodeURI(nameVal) + '&pwd=' + pwdVal);