中软Day13——AJAX概述

中软Day13

前端相关知识点

html(html5) 主要用来进行页面排版布局
css(css3) 主要用来实现页面梅花
js(Jquery) 主要用来实现前端功能特效 js的类库

采用上述技术开发的网页必须放在服务器上才对外提供服务，才能互联网上的网友看到。

服务器请求 F12

XHR XML HTTP REQUEST (请求) ajax

DOC 页面骨架

WS WEB Socket

Manifest html5 中的本地存储

ico icon 图标

swf flash

AJAX

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

什么是AJAX

Ajax = 异步 JavaScript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

初始AJAX

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。局部刷新

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

AJAX概述

它是使用XMLHttpRequest对象来与服务器通信。它可以发送和接收各种格式的信息，包括JSON、XML、HTML和文本文件。Ajax最吸引人的特性是它的“异步”特性，这意味着它可以与服务器通信、交换数据和更新页面，而无需刷新页面。

ajax的特性
- 在不重新加载页面的情况下向服务器发出请求
- 从服务器接收和处理数据
基本概念
- 什么是服务器？
  - 服务器也是电脑，只不过是一台24小时不断电，不关机的电脑。
  - 根据提供的服务功能不同：文件服务器，邮件服务器，Web服务器等
  - 总而言之，服务器是一台“提供了某种服务功能”的超级电脑
- 如何让电脑提供某种服务？
  - 想让电脑提供聊天服务，可以安装相应的聊天软件，如QQ/微信
  - 想让电脑提供听歌服务，可以安装相应的音乐软件，如网易云/酷狗
- 如何让电脑提供管理网站的服务？
  - 安装Web服务相关软件，如：Apache,IIS，Tomcat等
  - 安装了Web服务软件的电脑，称之为“Web服务器”
  - Web服务器软件：Apache,IIS,Tomcat.Nginx,NodeJS等

AJAX运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

AJAX应用场景

主要用于在不刷新页面的情况下，与服务器进行数据交换并更新页面。

1.显示新的内容不需要载入整个界面

2.登录不用跳转到新的页面

3.提交表单立即显示结果

4.搜索框提示文字下拉列表

服务器搭建

Web服务器搭建
- 什么是WAMPServer软件?
  
  W：Window操作系统
  
  A：Apache 世界第一的服务器软件，特点是简单，速度快，性能稳定
  
  M：MySQL开源免费的数据库软件，特点是体积小，速度快，使用成本低
  
  P：PHP超文本预处理器，直接将代码嵌入HTML文档中执行，特点是简单易学，容易上手
- 如何搭建Apache服务器？
  - 双击提供的安装包
  - 点击Next
  - 选择安装路径（注意路径中不要出现中文）
  - 勾选两个方框，点击next继续安装
  - 点击install开始安装
  - 安装完毕以后点击finish即可启动wamp
- 验证搭建是否成功
  
  打开浏览器输入127.0.0.1查看显示的内容
出现该页面，则说明该使用电脑变为服务器，WAMPServer安装成功。

通过WAMPServer，可以用ajax和服务器交换数据。
- 如何修改默认端口号
  - httpd.conf文件中搜索Listen,改为你想要的数字即可
  - 重启WAMP

操作步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

创建XMLHttpRequest核心对象,也就是创建一个异步调用对象.

var xmlHttp;
if(window.XMLHttpRequest){  //针对除IE6以外的浏览器xmlHttp=new XMLHttpRequest(); //实例化一个XMLHttpRequest
}else{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   //针对IE5,IE6
}

创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息，用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据.

XMLHttpRequest.open(method,URL,flag,name,password)

     代码中的参数解释如下所示:method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式，默认为true。name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。password：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。

var xmlHttp = new XMLHttpRequest();xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式xmlHttp.send(); //使用open()方法将请求发送出去xmlHttp.onreadystatechange()=>{if(xmlHttp.readyState === 4 && xmlHttp.status === 200){}
}

设置响应HTTP请求状态变化的函数.

处理响应的JS函数名称
```
httpRequest.onreadystatechange = nameOfTheFunction;
```
首先，函数需要检查请求的状态。如果状态值为XMLHttpRequest.DONE(对应于4)，这意味着收到了完整的服务器响应，您可以继续处理它。
```
if (httpRequest.readyState === XMLHttpRequest.DONE) {// Everything is good, the response was received.
} else {// Not ready yet.
}
```
readyState值记录在XMLHTTPRequest.readyState详情如下：
- 0(未初始化)或(请求未初始化)
- 1(装载)或(建立服务器连接)
- 2(装载)或(收到的请求)
- 3(互动)或(处理请求)
- 4(完整)或(请求完成，响应就绪)
处理响应码

如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功，因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200。
```
if (httpRequest.status === 200) {// Perfect!
} else {// There was a problem with the request.// For example, the response may have a 404 (Not Found)// or 500 (Internal Server Error) response code.
}
```
发送HTTP请求.

在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其语法代码如下所示：
```
    XMLHttpRequest.send(data)
```
其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：
```
  name=myName&value=myValue
```
只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。
获取异步调用返回的数据.
使用JavaScript或DOM实现局部刷新.
- 表单对象的数据更新
  
  表单对象的数据更新，通常只要更改表单对象的value属性值。
```
 FormObject.value = "新数值"
```
  有关表单对象的数据更新的示例：
```
   <html>            <head>                    <title>局部更新</title><script language = "javascript" type = "text/javascript">                                </head>           <body>                  <form name = "myForm">                         <input type = "text" value = "原数据" name = "myText">                         <input type = "button" value = "更新数据">                  </form>           </body>     </html>
```
- IE浏览器中标签间文本的更新
  
  在HTML代码中，除了表单元素之外，还有很多其他的元素，这些元素的开始标签与结束标签之间往往也会有一点文字，对这些文字的更新，也是局部更新的一部分。
```
     <p>文字</p><span>文字</span><div>文字</div><label>文字</label><b>文字</b><i>文字</i>
```
  在IE浏览器中，innerText或innerHTML属性可以用来更改标签间文本的内容。其中innerText属性用于更改开始标签与结束标签之间的纯文本内容，而innerHTML属性用于更改HTML内容。
```
     <html><head><title>局部更新</title><script language = "javascript" type = "text/javascript"></script></head><body><div id = "myDive">原数据</div><input type = "button" value = "更新数据"></body></html>
```
- DOM技术的局部刷新
  
  innerText和innerHTML两个属性都是IE浏览器中的属性，在Netscape浏览器中并不支持该属性。但无论是IE浏览器还是Netscape浏览器，都支持DOM。在DOM中，可以修改标签间的文本内容。
  
  在DOM中，将HTML文档中的每一对开始标签和结束标签都看成是一个节点。例如HTML文档中有一个标签如下所示，那么该标签在DOM中称之为一个“节点”。
```
<div id = "myDiv">原数据</div>
```
  在DOM中使用getElementById()方法可以通过id属性值来查找该标签（或者说是节点），如以下语句所示：
```
   var node = document.getElementById("myDiv");
```
  注意：在一个HTML文档中，每个标签中的id属性值是不能重复的。因此，使用getElementById()方法获得的节点是唯一的。
  
  在DOM中，认为开始标签与结束标签之间的文本是该节点的子节点，而firstChild属性可以获得一个节点下的第1个子节点。如以下代码可以获得
  
  节点下的第1个子节点，也就是
  
  标签与
  
  标签之间的文字节点。
```
  node.firstChild
```
  注意，以上代码获得的是文字节点，而不是文字内容。如果要获得节点的文字内容，则要使用节点的nodeValue属性。通过设置nodeValue属性值，可以改变文字节点的文本内容。完整的代码如下所示：
```
     <html><head><title>局部更新</title><script language = "javascript" type = "text/javascript"></script></head></html>
```
  注意：目前主流的浏览器都支持DOM技术的局部刷新。

原生
- 1.创建核心对象 XMLHttpRequest（xhr）
- 2.准备发送 xhr.open(参数)
  - 1. 请求方式 get（参数在URL） post(请求体)
    2. URL：请求地址
    3. 同步异步默认是异步 true
- 3.发送请求 xhr.send（参数）
  - 当是get时参数为null
  - 当是post 参数为需传递到后台的参数
- 4.回调函数 xhr.onreadystatechange
  - readyState
    - 0 对象创建成功
    - 1 已发送请求
    - 2 浏览器接收到数据
    - 3 浏览器解析数据
    - 4 数据解析完成可以开始使用
  - status
    - 2XX 成功
    - 3XX 转发或重定向
    - 4XX 找不到资源
    - 5XX 服务器端错误
不适用ajax如何实现异步刷新
- 隐藏帧
  - iframe 子框架上的数据放到大窗口的DOM元素下
JQuery封装的ajax
- $.ajax() 内部参数为一个对象
  - type 请求方式
  - url 请求地址
  - data 请求参数
  - dataType
    - xml responseXML
    - text responseText
    - script(脚本)responseText
    - html responseText
    - json responseText
    - jsonp responseText
  - success 数据请求成功后的回调函
  - error 失败后的回调函数

跨域

为什么会发生跨域

浏览器限制
当浏览器发现请求是跨域的时候，它会做一些校验，如果校验不通过它就会报跨域安全错误。
跨域
发出去的请求，协议、端口、请求地址，任何一个不一样，浏览器就会认为是跨域。
发送的是 XHR(XMLHttpRequest) 请求
如果发送的不是XHR请求，就算是跨域，浏览器也不会报错。
ajax默认不允许跨域，因为同源策略。

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

dataType改为jsonp

如何实现跨域

jsonp
利用了 script 不受同源策略的限制
缺点：只能 get 方式，易受到 XSS攻击
CORS（Cross-Origin Resource Sharing）,跨域资源共享
当使用XMLHttpRequest发送请求时，如果浏览器发现违反了同源策略就会自动加上一个请求头 origin；
后端在接受到请求后确定响应后会在后端在接受到请求后确定响应后会在 Response Headers 中加入一个属性 Access-Control-Allow-Origin；
浏览器判断响应中的 Access-Control-Allow-Origin 值是否和当前的地址相同，匹配成功后才继续响应处理，否则报错
缺点：忽略 cookie，浏览器版本有一定要求
代理跨域请求
前端向发送请求，经过代理，请求需要的服务器资源
缺点：需要额外的代理服务器
Html5 postMessage 方法
允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本、多窗口、跨域消息传递
缺点：浏览器版本要求，部分浏览器要配置放开跨域限制
修改 document.domain 跨子域
相同主域名下的不同子域名资源，设置 document.domain 为相同的一级域名
缺点：同一一级域名；相同协议；相同端口
基于 Html5 websocket 协议
websocket 是 Html5 一种新的协议，基于该协议可以做到浏览器与服务器全双工通信，允许跨域请求
缺点：浏览器一定版本要求，服务器需要支持 websocket 协议
document.xxx + iframe
通过 iframe 是浏览器非同源标签，加载内容中转，传到当前页面的属性中
缺点：页面的属性值有大小限制

JSONP原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的callback参数值 .
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。

这样做的好处在于保护了用户信息安全。为了既保护用户信息安全，又规避跨域（不同源则为跨域）限制，因此需要使用这种特殊的技术–jsonp.

jsonp利用script标签具有跨域能力的特点，允许用户通过script的src属性向服务器发送请求，并传递一个函数名作为参数，服务端返回数据时会将这个callback函数作为函数名包裹住从服务端接收的json数据，客户端会按照定义好的方式处理数据。

动态创建script标签 (可以进行跨域操作)
静态创建script标签：
- 保证加载顺序
- 参数不方便传递

jsonp实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="list"></div>
<script type="text/javascript">
function callbackFunction(result, methodName) {var html = '<ul>';for(var i = 0; i < result.length; i++) {html += '<li>' + result[i] + '</li>';}html += '</ul>';document.getElementById('list').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://www.myweb.com/demo/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

callbackFunction函数名作为参数传递给服务器，服务器返回数据形式为:callbackFunction([“list1”,“list2”]),显示结果会按照 callbackFunction()函数来处理。

客户端和服务器

服务器和客户端其实都是电脑，区别如下：

概念层面上差异
- 服务器：能够提供某种服务的电脑
- 客户端：想使用服务器所提供服务的电脑
硬件层面上差异
- 服务器：由于要给千千万万个客户端提供服务，因此一般来说，服务器的硬件配置要更高。
- 客户端：个人电脑，收据，平板等都称作客户端。
服务器提供服务

一些我们日常生活中使用的功能，其实都是服务器所提供的服务，如网页服务，邮箱服务，文件上传下载等。
服务器软件

既然服务器也是一台电脑，那么这台电脑就必须要安装操作系统，否则就是一台裸机,啥事情都做不了，更不用说提供服务了。-般来说，服务器更多会选择Linux 操作系统，而个人电脑更多会选择安装Windows操作系统。服务器能提供服务是由于在服务器操作系统上安装了很多软件，由这些软件对外提供服务，比如:

HTTP网页服务: Apache、 Tomcat、 Is等。

文件上传下载服务: VsFtp 等。

文件上传下载服务: VsFtp 等。

数据存储服务: MySq!. Oracle 等。

小结:服务器就是提供服务的，客户端就是使用服务器所提供的服务。

网络相关概念

IP地址 (唯一的确定互联网上的一台计算机)

地址是为了标注某个地点，方便查找。互联网上诸多公司，每家都有自己的服务器提供服务。通过ip地址就能找到特定的服务器，使用这台服务器提供的服务。

百度服务器ip：123.125.114.144
域名 IP地址的别名(mysql) 方便记忆

由于IP地址是一串数字，很难记忆，就像经纬度一样，人们大多记下的是地名。而域名就如同地名一样，方便人们查找服务器。
DNS 用来维护IP地址与域名的关系

DNS叫做域名解析器，提供域名与IP地址的映射关系。

访问服务器流程：本机host文件 ——》DNS服务器 ——》服务器
端口确定计算机上的网络应用程序

我们可以通过域名来找一台服务器，但一台服务器可能提供多种服务，我们需要使用端口号来区分服务。

其实我们每次访问网页，最完整的写法是：http://www.baidu.com.80

但80这个端口比较特殊，可以省略不写。

我们再设置邮箱客户端的时候，也需要指定端口号。

小结：IP地址是用来查找某一台服务器的。域名是方便人们记忆的。DNS维护着域名和IP地址的映射关系。端口是用来区分一台服务器上提供的不同服务的。

通信协议

此地无银三百两隔壁李四不曾偷达成了某种协议

计算机中的协议可以简单理解为两台计算机交流时说的话。

工程师小明 ----->点击按钮去播放电影 -----> 笔记本 -----> 按照指令执行

常见协议：

HTTP 超文本传输协议 HTTPS 更安全的文本传输协议

ftp 文件传输协议

smpt/pop3 邮件收发协议

…

搭建服务器环境

wamp 集成环境w   windows   操作系统a Apache    提供静态资源服务（html页面   js文件 css 文件   图片）m   mysql     数据库p   PHP       编程语言 ， 用来开发网站

apache安装配置

下载apache版本：httpd-2.2.17-win32-x86-no_ssl.msi

1、双击httpd-2.2.17-win32-x86-no_ssl.msi。出现 Windows 标准的软件安装欢迎界面，直接点“Next”继续，出现授权协议，选择“I accept the terms in the license agreement”同意授权协议，然后点“Next”继续，出现安装说明。
2、 “Network Domain”填写你的网络域名，如果没有网络域名，可以随便填写。但如果你架设的 Apache 服务器如果要放入Internet ，则一定要填写正确的网络域名。在“Server Name”下填入你的服务器名，也就是主机名。“Administrator’s Email Address”填写系统管理员的联系电子邮件地址。上述三条信息三条信息均可任意填写，无效的也行，其中联系电子邮件地址会在当系统故障时提供给访问者。如下图所示，此时我们选择8080端口。

3、选择自定义安装。

4、将所有组件都选择安装。

5、确认安装选项无误，否则可以点“Back”一步步返回检查。点next，Install”开始按前面设定的安装选项安装。
6、我们选择ony for current user,on port 8080,when started manually.
则需要在DOS下，使用httpd –k install.将apache2.2设置为windows中的服务方式运行。（如果是 Apache2.2 之前的版本，输入“apache -k install”）

7、若我们选择for all user,on port 80,as a service --recommended.则无需更改可以直接启动。

8、设置完成，通过在DOS（输入 net start apace2.2）或者浏览器localhost运行，均有启动成功显示。

安装之后，我们占用80端口，或者8080端口，有时候会因为端口冲突而造成无法启动apace2.2。
需要将c:\apache\conf\httpd.conf中的配置进行更改，将其中的Listen 8080 或者Listen 80，更改为 Listen 9090。
这是由于windows IIS中的Web服务器默认情况下在TCP 80端口监听连接请求，而8080端口一般留给代理服务器使用，所以为了避免Apache web 服务器的监听端口与其发生冲突，将Apache Web服务器的监听端口修改为不常用的高端端口9090。
在浏览器中进行访问时，应使用localhost:9090即可。

配置根路径

1.找到配置文件 wamp\bin\apache\Apache 2.4.4 \conh\httd.conf

2.在文件中搜索(ctrl + F)documentroot

DocumentRoot "/var/www/html"    # apache的默认web站点目录路径，结尾不要添加斜线<Directory />     #行为对根目录的限制Options FollowSymLinks   # followsymlinks表示允许使用符号链接，默认为禁用AllowOverride None     # 表示禁止用户对目录配置文件(.htaccess进行修改)重载，普通站点不建议开启
</Directory><Directory "/var/www/html">  #行为对 此目录 的控制Options Indexes FollowSymLinks #启用Indexes、FollowSymLinks两种特性。AllowOverride None Order allow,deny Allow from all
</Directory>

3.修改根路径两个DocumentRoot 都要进行修改

DocumentRoot "C:/Program Files/Apache Group/Apache/htdocs"
这是网站的根目录。如果您想把网站文件存放在“D:\myweb”目录下，可以把DocumentRoot后面的目录修改为“D:/myweb”。

配置虚拟主机

配置虚拟主机可以配置多个网站步骤如下

1.开启虚拟主机辅配置在httpd.conf 中找到 Virtual hosts 然后把#去掉

2.配置虚拟主机 D:\develop\amp\bin\apache\Apache2.4.4\conf\extra httpd-vhosts.conf

输入域名时往往会忽略端口而apache 的端口号是80

3.找到<VirtualHost *:80>

分别修改 DocumentRoot (文件目录)

ServerName （域名）

ServerAlias （别名）

4.修改DNS(C:\Windows\System32\drivers\etc)

127.0.0.1 chen.com

127.0.0.1 www.chen.com

配置多个虚拟主机

1.找到文件 D:\develop\amp\bin\apache\Apache2.4.4\conf\extra httpd-vhosts.conf

httpd配置文件 ==》documentRoot 根路径 ==》extra 文件夹 ==》v-hosts配置文件 ==》定义主机别名根路径 ==》修改hosts 127.0.0.1（表示本机）chen.com

配置多台虚拟主机

VirtualHosts 把其下面的注释打开注释内容为 —Include conf/extra/httpd-vhosts.conf ==》在v-hosts文件中配置多台虚拟主机 ==》修改hosts文件 ==》修改权限标签Directory 把它更改为根目录

2增加若有多个就写多个

<VirtualHost *:80>DocumentRoot "D:\test"ServerName zhong.comServerAlias www.zhong.com
</VirtualHost>

3.切记修改host文件修改DNS