JS里AJAX的使用--（服务器与客户端数据交换）

使用ajax需要先了解计算机前后端的通信原理，也就是需要了解我们的服务器与客户端数据是如何交换的。

DNS的查询过程：（以访问www.qq.com为例）

1、在浏览器中输入www.qq.com域名，操作系统会先检查自己 本地的hosts文件 是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。

2、如果hosts里没有这个域名的映射，则查找 本地DNS解析器缓存 ，是否有这个网址映射关系，如果有，直接返回，完成域名解析。

3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/IP参数中设置的首选DNS服务器，在此我们叫它 本地DNS服务器 ，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。

4、如果要查询的域名，不由本地DNS服务器区域解析，但该 服务器 已 缓存 了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。

5、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至 根DNS ，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该 顶级域名服务器 的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找qq.com域服务器，重复上面的动作，进行查询，直至找到www.qq.com主机。

端口号

端口号---具有网络功能的应用软件的标识号。注意，端口号是不固定的，即可以由用户手工可以分配（当然，一般在软件编写时就已经定义）。当然，有很多应用软件有公认的默认的端口，比如FTP：20和21，HTTP：80，TELNET：23等等，这里就不一一列举了。一个软件可以拥有多个端口号，这证明这个软件拥有不止一个网络功能。

0-1023是公认端口号，即已经公认定义或为将要公认定义的软件保留的，而1024-65535是并没有公共定义的端口号，用户可以自己定义这些端口的作用。

那么端口号到底有什么作用呢？请大家继续往下看。

当一台电脑启动了一个可以让远程其他电脑访问的程序，那么它就要开启至少一个端口号来让外界访问。我们可以把没有开启端口号的电脑看作是一个密封的房间，密封的房间当然不可能接受外界的访问，所以当系统开启了一个可以让外界访问的程序后它自然需要在房间上开一个窗口来接受来自外界的访问，这个窗口就是端口。

那么为什么要给端口编号来区分它们呢，既然一个程序开了一个端口，那么不是外部信息都可以通过这个开启的端口来访问了吗？答案是不可以。为什么呢？因为数据是用端口号来通知传输层协议送给哪个软件来处理的，数据是没有智慧的，如果很多的程序共用一个端口来接受数据的话，那么当外界的一个数据包送来后传输层就不知道该送给哪一个软件来处理，这样势必将导致混乱。

上一次提到提到在一个经过OSI第四层传输层封装的数据段的第四层报头里包含两个端口号，既源端口号和目的端口号，目的端口号的作用上面已经介绍了，下面让我们了解一下原端口号吧。

源端口号一般是由系统自己动态生成的一个从1024-65535的号码，当一台计算机A通过网络访问计算机B时，如果它需要对方返回数据的话，它也会随机创建一个大于1023的端口，告诉B返回数据时把数据送到自己的哪个端口，然后软件开始侦听这个端口，等待数据返回。而B收到数据后会读取数据包的源端口号和目的端口号，然后记录下来，当软件创建了要返回的数据后就把原来数据包中的原端口号作为目的端口号，而把自己的端口号作为原端口号，也就是说把收到的数据包中的原和目的反过来，然后再送回A，A再重复这个过程如此反复直到数据传输完成。当数据全部传输完A就把源端口释放出来，所以同一个软件每次传输数据时不一定是同一个源端口号.

端口分类 逻辑意义上的端口有多种分类标准，下面将介绍两种常见的分类：

1、 按端口号分布划分

（1）知名端口（Well-Known Ports）

知名端口即众所周知的端口号，范围从0到1023，这些端口号一般固定分配给一些服务。比如21端口分配给FTP服务，25端口分配给SMTP（简单邮件传输协议）服务，80端口分配给HTTP服务，135端口分配给RPC（远程过程调用）服务等等。

（2）动态端口（Dynamic Ports）

动态端口的范围从1024到65535，这些端口号一般不固定分配给某个服务，也就是说许多服务都可以使用这些端口。只要运行的程序向系统提出访问网络的申请，那么系统就可以从这些端口号中分配一个供该程序使用。比如1024端口就是分配给第一个向系统发出申请的程序。在关闭程序进程后，就会释放所占用的端口号。

不过，动态端口也常常被病毒木马程序所利用，如冰河默认连接端口是7626、WAY 2.4是8011、Netspy 3.0是7306、YAI病毒是1024等等。

2、按协议类型划分

按协议类型划分，可以分为TCP、UDP、IP和ICMP（Internet控制消息协议）等端口。下面主要介绍TCP和UDP端口：

（1）TCP端口

TCP端口，即传输控制协议端口，需要在客户端和服务器之间建立连接，这样可以提供可靠的数据传输。常见的包括FTP服务的21端口，Telnet服务的23端口，SMTP服务的25端口，以及HTTP服务的80端口等等。

（2）UDP端口

UDP端口，即用户数据包协议端口，无需在客户端和服务器之间建立连接，安全性得不到保障。常见的有DNS服务的53端口，SNMP（简单网络管理协议）服务的161端口，QQ使用的8000和4000端口等等。

常用的端口号

【21端口】

21端口主要用于FTP（File Transfer Protocol，文件传输协议）服务。

【23端口】

23端口主要用于Telnet（远程登录）服务，是Internet上普遍采用的登录和仿真程序。

【25端口】

25端口为SMTP（Simple Mail Transfer Protocol，简单邮件传输协议）服务器所开放，主要用于发送邮件，如今绝大多数邮件服务器都使用该协议。

【53端口】

53端口为DNS（Domain Name Server，域名服务器）服务器所开放，主要用于域名解析，DNS服务在NT系统中使用的最为广泛。

【69端口】

TFTP是Cisco公司开发的一个简单文件传输协议，类似于FTP。

【80端口】

80端口是为HTTP（HyperText Transport Protocol，超文本传输协议）开放的，这是上网冲浪使用最多的协议，主要用于在WWW（World Wide Web，万维网）服务上传输信息的协议。

【443 端口】

服务：Https

说明：网页浏览端口，能提供加密和通过安全端口传输的另一种HTTP。

【109、110端口】

109端口是为POP2（Post Office Protocol Version 2，邮局协议2）服务开放的。

110端口是为POP3（邮件协议3）服务开放的，POP2、POP3都是主要用于接收邮件的。

Ajax 简介

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。

五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。

但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。

一、业务需求

在开发中，当一个列表页面加载完成后，我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签。

例如如下表格：

我有一系列的商品编号，我需要根据商品编号通过ajax到服务器获取商品对应的名称，然后再用js更新界面(实际中的业务当然不是获取商品名称这么简单)

二、实现方案

2.1 错误方案

一般情况下，我们会直接想到，直接写个for循环，在循环内发起ajax请求获取数据，再把获取的数据更新到对应的id对应的标签上，

如下：

我们以数组模拟一些列id：

var array = [1, 3, 2, 5, 3] 

循环的ajax请求方法：

function foreach_ajax() {  for (var i = 0i <array.lengthi++) {  $.get("/home/loop_ajax", { value: array[i] }, function (data) {  console.log(array[i]+","+data) }) }  }  

调用：

$(function () {  foreach_ajax()  }) 

测试结果如下：

我们可以看到，在循环的内部我们根本取不到array[i]的值。

导致这种结果的原因是：ajax是异步执行的，在循环结束的时候第一次ajax还没有将服务器数据返回，而循环结束的时候for中的变量i已经释放了，所以array[i]=undefined

2.2 正确方案

正确的方式是以递归的方式循环ajax。

如下：

我们以数组模拟一些列id：

var array = [1, 3, 2, 5, 3] 

递归的ajax请求方法：

function Loop_ajax(index, array) {  if (index <array.length) {   var value = array[index] $.get("/home/loop_ajax", { value: value }, function (data) {  console.log(array[index] + "," + data) if (index <array.length) {  Loop_ajax(index + 1, array)  }  }) }  }  

调用：

$(function () {  Loop_ajax(0, array) }) 

测试结果如下：

截图的这段代码没有问题.

提示 错误码500 是代表服务器端出错了而不是前端的问题,

应该先去检查服务器端代码new.php是否有错误,

如果php也没有问题那就要看看服务器是否有什么故障了.

---