Ajax
前言
前面我们已经学习了js
基础知识和一些简单的特效,基本上已经能够写出一个带有特效的静态页面了,为什么还要称之为静态页面呢?因为网页里的数据都是写死的,真正的工作中,我们是要通过Ajax
技术,去后台获取数据的。所以在本篇文章,我会向大家介绍下什么是Ajax
技术,并且它的实现原理是什么。
1. 服务器端技术基础
1.1 服务器
在学习 Ajax
之前,我们首先需要知道什么是服务器。
1、什么是服务器?
服务器的本质其实就是一台电脑,不过它不像一般的电脑一样拥有鼠标键、键盘、显示器等输入设备,它直接就是一个主机,里面只有主板、硬盘、 cpu
、内存并且性能比一般计算机的性能更高,稳定性更强。
- 通过网络为其他计算机提供应用服务的计算机就是服务器。
- 有别于普通的
PC
,服务器性能更好、安全性更高、稳定性更强。 - 服务器运行在有特定环境要求的地方
-
IDC
(对气候、能源、消防、建筑、安保等要求。
服务器外观图:
2、服务器提供什么服务
根据需求的不同,服务器的种类也有所不同。
- 网页服务器(
Web Server
) - 邮件服务器(
Mail Server
) - 数据库服务器(
Database Server
) -
FTP
服务器(FTP Server
) - 域名服务器(
DNS Server
)
3、服务器操作系统:
Windows Server
-
Linux
(Debian
,Ubuntu
,CentOS
,Fedora
)
4、服务器的应用软件:
-
Web
服务器(又称:http
服务器,主要提供文档的浏览功能,文本、图片、视频、音频)。-
IIS
(Windows
) Apache
Nginx
-
-
数据库服务器
SQL Server
Oracle
MySQL
1.2 客户端
客户端: 通过网络向服务器请求服务的计算机就是客户端(手机、电脑);
客户端软件: 在客户端计算机上运行的与服务器通讯的软件就叫客户端软件;
单机软件: 在客户端计算机上运行的不访问网络的软件叫做单机软件;
1.3 软件开发架构
软件开发架构分为两种,分别是C/S
架构和B/S
架构。
1、C/S架构:
C/S
,是Client
:(客户端)和Server
(服务器)两个单词的简写,指的是客户端应用程序与服务器端应用程序通讯的软件开发架构。
对于C/S
架构,最为常见的例子就是网络游戏,比如LOL
,如果不联网就无法使用。
优点:
- 由于是原生的应用,所以显示的效果会更加酷炫;
- 性能较高,可以将一部分计算的工作放在客户端上,这样服务器只需要处理数据即可。
缺点:
- 重量级,必需要安装
app
; - 软件需要用户去更新,并且要考虑不同的设备访问。
2、B/S架构
B/S
,是Browser
:(浏览器)和Server
(服务器),两个单词的简写,指的是Web
浏览器与服务器端应用程序通讯的软件开发架构。
现在所有的网站都是B/S
架构,比如知乎、网易云音乐、百度...,用户只需使用浏览器就能访问服务器;
优点:
- 轻量级,不需要安装客户端,用户不需要主动去更新内容,只需要开发人员更改服务器的内容即可;
- 多设备同步,所有数据都在网上。
缺点:
- 性能较低,如果是很酷炫的页面,那么现阶段还实现不了;
- 移动设备兼容性较好,但是浏览器兼容性较差。
1.4 网络基础
1、IP地址
IP
地址是网络上每一台设备通讯时的身份标识(就像身份证、手机号)。
IP
地址长什么样子呢?
192.168.10.10
比如,百度的IP
地址就是:
119.75.213.61
特殊的IP
地址-代表本机:
127.0.0.1
如何查看当前IP
地址?
打开命令行工具,直接输入“ipconfig”
ipconfig 命令
2、域名
域名简单的说,就是给IP
地址起一个容易记忆的名字(就好比人的名字一样)例如百度的域名:www.baidu.com
。
因为IP
地址记忆起来非常不方便,所以日常生活中用户通过域名来访问服务器更加方便。
特殊的域名:localhost
(代表本机)。
3、DNS 服务器
什么是DNS
?DNS
(Domain Name Server
),其实就是域名服务器。
输入网址后的访问流程(域名->DNS
->IP
地址)
查看域名与IP
地址的对应关系(ping
命令)
可以用Hosts
文件让自己的电脑变成一个属于自己的DNS
服务器。
4、网络端口(Port)
端口是指计算机与外界进行通讯的数据出口(入口),每个端口为不同的应用传输不同数据。
端口号: 每一个端口都有一个端口号。范围是从0
到65535
。
端口号通常跟在IP
地址后面,用冒号分隔。例如:192.168.1.1:80
、www.jd.com:80
常用端口号: 80(HTTP)
、3306(MySQL)
、21(FTP)
。
查看本机被占用的端口情况(命令行输入:netstat
)
5、数据库
按照数据结构来组织、存储和管理数据的仓库,软件开发行业一般指的是数据库软件,常见的有Oracle
、MySQL
等。
特点:
- 数据共享,多用户同时访问数据的稳定性;
- 故障恢复,数据库软件,提供了一套方法,可以用来发现错误,并且修复错误。
- 减少数据冗余,由于大家都可以使用同一套数据,没有必要重复创建。
DBA数据库管理员:
从事管理和维护数据库管理系统(DBMS
)的相关工作人员的统称。保证数据库的稳定性、安全性、完整性和高性能。
2. Web 服务器
2.1 Web服务器的作用
- 可以通过浏览器访问或查看
Web
服务器上的文件资源。 - 文件资源可以是
HTML
网页、文本、图片、视频、音频、Web
服务器程序等。
2.2 AMP 集成环境
AMP
,A:Apache
,M:MySQL
,P:PHP
1、Apache:
世界排名第一的服务器软件,特点是:简单速度快,性能稳定。
2、MySQL:
体积小、速度快、使用成本低,而且还是开源。
3、PHP:
超文本预处理器,直接将代码嵌入到HTML
文档中执行,简单易学,容易上手。
2.3 Web服务器软件的安装
在自己的Windows
电脑上Web
服务器软件 - Wamp
。
WampServer
:Wamp
就是Windows
、Apache
、Mysql
、PHP
集成安装环境,即在window
下的apache
、
php
和mysql
的服务器软件。PHP
扩展、Apache
模块,开启/关闭鼠标点点就搞定,再也不用亲自去修改
配置文件了,WAMP
它会去做。再也不用到处询问php
的安装问题了,WAMP
一切都搞定了,这个软件
在windows
平台上使用的较多。
下载Wamp
:Wamp官网
安装Wamp
:安装的时候要区分版本(64
位,32
位),点击下一步下一步。
注意:安装目录的路径不能出现中文。
程序安装成功之后,任务栏里面的小图标是绿色的话,说明安装成功。
刚刚上面提到过,域名:localhost
和 IP
地址:127.0.0.1
都可以打开本地服务器:
当出现wamp
页面的时候说明软件安装成功。
2.4 安装的建议与问题
- 问题1:无法安装软件(请检查安装软件的版本与操作系统匹配)
- 问题2:安装完成后,
web
服务器没有正常运行(测试web
服务器的端口号是否被占用) - 建议1:
64
位版本、32
位版本要分清 - 建议2:安装目录的路径不要有中文
- 建议3:提示默认浏览器和默认编辑器的设置可忽略
- 建议4:安装时建议关闭防火墙
- 建议5:如果已安装其他的
Web
服务器软件请先关闭
2.5 Wamp服务器的使用
1、基本功能使用:
修改语言 右击任务栏中的软件小图标==> language
==> chinese
Web服务器的启动、停止、运行: 左击小图标 (修改配置文件之后,一定要重启服务器);
功能介绍:Apache
其中两个配置文件后面可能需要修改,所以这里需要知道在哪找到它们。
看下它的配置文件-httpd.conf
,其中 #
表示的是注释的意思。
功能介绍:MySQL
看下它的配置文件-my.ini
,其中 ;
表示的是注释的意思:
功能介绍:PHP Apache
是一个web
服务器,它本身是不能解析PHP
语言的,所以这里也集成了一个PHP
解析器
看下它的配置文件-php.ini
,其中 ;
表示的是注释的意思:
2.6 Wamp服务器的简单配置
1、为Web服务配置一个域名(仅限本机使用的域名)
找到C:\Windows\System32\drivers\etc\hosts
文件并修改
将本地的IP设置一个新的域名lxh.com
,重启Wamp
服务器,在地址栏里输入lxh.com
就会跳转到服务器页面:
2、自定义Web服务器的根目录
我们可以看到,当我们输入本地域名或者 IP
的时候,都会弹出来服务器的界面,假如我想要打开一个文件的时候怎么办呢?这时候我们就需要配置服务器的根目录,只要是在根目录里面的文件,都可以通过服务器打开。
查找并打开安装目录D:\wamp64\bin\apache\apache2.4.23\conf\extra\httpd-vhosts.conf
文件:
打开修改配置文件,其中ServerName
指的是域名,我们可以将第一步配好的本地域名地址写上去;DocumentRoot D:/lxhAjax
和
是自定义Web服务器的根目录为D:/lxhAjax
文件夹
3、为Web服务器配置虚拟主机(一台Web服务器当多台用)
在同一局域网下别人可以通过你的IP
访问你的Web
服务器文件夹。
- 在
httpd-vhosts.conf
文件中查找Require local
- 将
Require local
改成Require all granted
不过建议大家不要这样做,安全性不高,电脑里面的东西会被别人看到。
4、注意事项
-
php5.6
以下版本要设置php
默认编码,default_charset = UTF-8
,否则PHP
程序可能无法正确显示中文。 - 在
httpd.conf
文件设置DocumentRoot
前,先检查是否已经关闭了虚拟主机,否则可能导致设置无效。 -
默认情况下
Wamp
服务器只能被本机访问,如果向被局域网的其他电脑访问需要修改配置- 在
httpd-vhosts.conf
文件中查找Require local
- 将
Require local
改成Require all granted
- 在
- 检查网络是不是通的
ping
对方IP
- 检查防火墙是否开启,如果开启将不能正常被访问
- 确保端口没有被其它程序占用
- “
#
”表示注释 - 配置文件每一行不要增加多于的空格。否则服务器容易报错。
- 修改配置要格外小心,禁止无意修改其它内容
3. HTTP传输协议
网络协议约定了网络计算机之间数据的传输的方式、数据的格式等。
常见的网络应用底层协议:
-
HTTP
、HTTPS
超文本传输协议 -
FTP
文件传输协议 -
SMTP
简单邮件传输协议
HTTP协议:
HTTP
即超文本传输协议,网站是基于HTTP
协议的,比如我们在开发网站中经常使用css
、js
、图片等等都是基于该协议传输的。
组成部分:
HTTP
协议是对请求(Request
)和响应(Response
)的报文内容进行了约束和规范。
请求: 客户机向服务器发送数据
响应: 服务器向客户机发送数据
发送并请求请求报文,接收响应报文,这种获取数据的方式我们称之为HTTP
协议。
3.1 请求报文
请求是由客户端发起,其规范格式为:请求行、请求头、请求主体。
1、请求行:
由请求方法、请求URL
和HTTP
协议及版本构成
GET /code/login.php?username=123&password=123 HTTP/1.1
POST /code/login.php HTTP/1.1
2、请求头:
这里设置的主要是一些信息,包含客户端,服务器。
-
User-Agent
:浏览器的具体类型,如:User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
-
Accept
:浏览器支持哪些数据类型,如:Accept: text/html,application/xhtml+xml,application/xml;q=0.9;
-
Accept-Charset
:浏览器采用的是哪种编码,如:Accept-Charset: ISO-8859-1
-
Accept-Encoding
:浏览器支持解码的数据压缩格式,如:Accept-Encoding: gzip, deflate
-
Accept-Language
:浏览器的语言环境,如:Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
-
Host
:请求的主机名,允许多个域名同处一个IP
地址,即虚拟主机。Host:www.baidu.com
-
Connection
:表示是否需要持久连接。Keep-Alive/close
,HTTP1.1
默认是持久连接,它可以利用持久连接的优点,当页面包含多个元素时(例如Applet
,图片),显著地减少下载所需要的时间。要实现这一点,Servlet
需要在应答中发送一个Content-Length
头,最简单的实现方法是:先把内容写入ByteArrayOutputStream
,然后在正式写出内容之前计算它的大小。如:Connection: Keep-Alive
-
Content-Length
:表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。 -
Content-Type
:WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如:Content-Type: text/html; charset='gb2312'
-
Content-Encoding
:WEB
服务器表明自己使用了什么压缩方法(gzip,deflate
)压缩响应中的对象。例如:Content-Encoding:gzip
-
Content-Language
:WEB
服务器告诉浏览器自己响应的对象的语言。 -
Cookie
:最常用的请求头,浏览器每次都会将cookie
发送到服务器上,允许服务器在客户端存储少量数据。 -
Referer
:包含一个URL,用户从该URL
代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
3、请求体:
这里是提交给服务器的数据
需要注意的是,如果是往服务器提交数据,需要在请求头中设置Content-Type:application/x-www-form-urlencoded
(在ajax
中需要手动设置);
3.2 响应报文
响应报文是服务器发回给客户端的。组成部分有状态行,响应头,响应主体。
1、状态行:
由协议版本号、状态码和状态信息构成
HTTP/1.1 200 OK
常见的状态码:
-
1XX
:信息状态码-
100
Continue
继续,一般在发送post
请求时,已发送了http header
之后服务端将返回此信息,表示确认,之后发送具体参数信息
-
-
2XX
:成功状态码-
200
OK
正常返回信息 -
201
Created
请求成功并且服务器创建了新的资源 -
202
Accepted
服务器已接受请求,但尚未处理
-
-
3XX
:重定向-
301
Moved Permanently
请求的网页已永久移动到新位置。 -
302
Found
临时性重定向。 -
303
See Other
临时性重定向,且总是使用 GET 请求新的 URI。 -
304
Not Modified
自从上次请求后,请求的网页未修改过。
-
-
4XX
:客户端错误-
400
Bad Request
服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。 -
401
Unauthorized
请求未授权。 -
403
Forbidden
禁止访问。 -
404
Not Found
找不到如何与 URI 相匹配的资源。
-
-
5XX
: 服务器错误-
500
Internal Server Error
最常见的服务器端错误。 -
503
Service Unavailable
服务器端暂时无法处理请求(可能是过载或维护)。
-
2、响应头:
-
Date
:响应时间 -
Server
:服务器信息 -
Last-Modified
:资源最后修改时间 由服务器自动生成 -
ETag
:资源修改后生成的唯一标识,由服务器自动生成 -
Content-Length
:响应主体长度 -
Content-Type
:响应资源的类型
3、响应主体:
即服务端返回给客户端的内容;
4. Ajax 编程
Asynchronous Javascript And XML
(异步的Javascript
和XML
)。
4.1 Ajax的基本概念
思考:
我们访问一个普通网站时,当浏览器加载完HTML
、CSS
、JS
以后,网站就固定了,如果网站内容发生改变,必须刷新网页后,才能看到更新内容。
Ajax概念:
在浏览器中,我们能够不刷新页面,通过Ajax
的方式去获取一些新的内容。
-
Ajax
不是一门的新的语言,而是对现有技术的综合利用。 - 本质是在
HTTP
协议的基础上以异步的方式与服务器进行通信。 - 核心是通过浏览器端的
js
帮我们预定义的一个异步对象XMLHttpRequest
来完成的
AJAX
是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
优点:
- 页面无刷新,用户体验好;
- 异步通信,更加快的响应能力;
- 减少冗余请求,减轻了服务器负担;
- 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序
缺点:
- 浏览器对
XMLHttpRequest
对象的支持度不足,存在兼容性; -
Ajax
干掉了back
按钮,即对浏览器后退机制的破坏; - 对搜索引擎的支持比较弱;
- 存在一定的安全问题;
- 无法用
URL
直接访问; - 开发调试工具的缺乏。
Ajax应用场景:
- 场景1 数据验证
- 场景2 按需取数据
- 场景3 自动更新页面
Ajax 包含以下五个部分:
Ajax
并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。
- 使用
CSS
和XHTML
来表示。 - 使用
DOM
模型来交互和动态显示。 - 数据互换和操作技术,使用
XML
与XSLT
- 使用
XMLHttpRequest
来和服务器进行异步通信。 - 使用
javascript
来绑定和调用。
传统Web应用程序与Ajax Web应用程序对比:
主要的差别,其实不是JavaScript
,不是HTML/XHTML
和CSS
,而是采用了XMLHttpRequest
来向服务器异步的请求XML
数据。
同步:
- 必须要等前面的任务完成,才能继续后面的任务,一定要按顺序执行。
异步:
- 指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序。
- 其优势在于不阻塞程序的执行,从而提升整体执行效率。
-
XMLHttpRequest
可以以异步方式的处理程序。
4.2 创建Ajax
Ajax
的原理简单来说,就是通过XMLHttpRequest
对象来向服务器发送异步请求,从服务器获得数据,然后用javascript
来操作DOM
而更新页面。其中最关键的一步就是从服务器获得请求数据。
1、创建XMLHttpRequest对象:
Ajax
的核心是XMLHttpRequest
对象,它是Ajax
实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成。
现代浏览器:
所有现代浏览器(IE7+
、Firefox
、Chrome
、Safari
以及Opera
)均内建XMLHttpRequest
对象。
var xhr = new XMLHttpRequest();
老版本IE:
老版本的Internet Explorer
(IE5 和 IE6)使用ActiveX
对象:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括IE5
和IE6
,请检查浏览器是否支持XMLHttpRequest
对象。如果支持,则创建 XMLHttpRequest
对象。如果不支持,则创建ActiveXObject
:
兼容性处理:
var xhr = null;
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest对象的属性和方法:
2、准备请求,设置请求的url等参数:
首先通过open()
方法初始化XMLHttpRequest
对象,接受三个参数:
// 规定请求的类型、URL 以及是否异步处理请求。
xhr.open(method,url,async);
method: 表示的是请求类型的字符串,可以是“GET
”或者“POST
”。
GET请求:
xhr.open("GET","demo.php",true);
POST请求:
xhr.open("POST","demo.php",true);
url: 第二个参数是要作为请求发送目标的URL
。
async: 第三个参数是true
或false
,表示请求是以异步还是同步的模式发出。(默认为true
,一般不建议为false
)
-
false
:同步模式发出的请求会暂停所有javascript
代码的执行,直到服务器获得响应为止,如果浏览器在连接网络时或者在下载文件时出了故障,页面就会一直挂起。 -
true
:异步模式发出的请求,请求对象收发数据的同时,浏览器可以继续加载页面,执行其他javascript
代码
3、发送请求:
通过XMLHttpRequest
对象的send()
方法,向服务器发送请求。
xhr.send();
GET请求:
一般情况下,使用Ajax
提交的参数多数是些简单的字符串,可以直接使用GET
方法将要提交的参数写到open
方法的url
参数中,此时send
方法的参数为null
或为空。
// get请求是将数据拼接在url后面的
xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);
POST请求:
如果需要像HTML
表单那样POST
数据,请使用setRequestHeader()
来添加HTTP
头。然后在send()
方法中规定你希望发送的数据:
// post请求需要加一个请求头,并且使用send方法将数据进行发送
xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send(...);
4、处理响应:
当服务器收到浏览器发送的数据后,会响应一个内容,因为不知道什么时候数据响应回来,所以提供了一个事件方法onreadystatechange
。每当readyState
改变的时候就会触发onreadystatechange
事件,readyState
属性:存有XMLHttpRequest
的状态信息。
xhr.onreadystatechange = function(){
// 为了保证数据完整回来,我们一般会判断两个值
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
onreadystatechange
:当处理过程发生变化的时候执行里面的函数
readyState
:ajax
处理过程
-
0
:请求未初始化(还没有调用open()
)。 -
1
:请求已经建立,但是还没有发送(还没有调用send()
)。 -
2
:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 -
3
:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 -
4
:响应已完成;您可以获取并使用服务器的响应了。
status
状态码属性(详见上面状态码类型):
-
200
:”OK
” -
404
: 未找到页面
responseText
:获得字符串形式的响应数据;
4.3 Ajax实现一个简单的聊天室
基本html结构:
简单的Ajax实例聊天室
js部分:
// 1-发送按钮注册点击事件
var send = document.querySelector(".send");
var clear = document.querySelector(".clear");
var messages = document.querySelector(".messages");
var textarea = document.querySelector(".input").children[0];
send.onclick = function() {
// 1-获取输入的内容 动态创建一个p标签 添加到 messages中
var p = document.createElement("p");
var content = textarea.value;
if (content != "" && content.trim()) {
p.innerText = content + ":Levi";
messages.appendChild(p);
p.className = "self";
textarea.value = "";
}
// 2-创建Ajax请求
var xhr;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('post', 'chat.php', true);
// post请求的时候,需要使用setRequestHeader()添加响应头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("message=" + content);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var reply = xhr.responseText;
var p = document.createElement("p");
p.innerText = "网友:" + reply;
p.className = "other";
messages.appendChild(p);
}
}
}
// 3-清屏按钮
clear.onclick = function() {
messages.innerHTML = "";
}
// 4-回车键触发发送按钮
textarea.onkeydown = function(e) {
e = window.event || e;
if (e.keyCode == 13) {
send.onclick();
e.preventDefault();
}
}
PHP部分:
PHP
部分我们可以不用深究,只需要知道请求的数据message
,在php
里其实就是一个随机字符串。
效果图:
4.4 复杂的数据格式介绍
在HTTP
协议中,所有数据最终的传输格式全部都是字符串。如果想要在HTTP
协议中传输一些复杂类型的数据,如数组、对象等,无法直接实现。
后台只有一个,但是开发语言却有很多种,一种后台格式的数据,如何适应全部开发语言的需求呢?所以需要一个统一的数据格式来在各个语言之间传递数据。
4.4.1 XML数据格式
XML
(Extensible Markup Language
),可扩展标记语言。它也是一个标记语言,所以它里面也是标签,并且也有文档声明。
XML文件的基本格式:
Levi
18
注意:
- 必须有一个根元素
- 不可以有空格、标签不可以以数字、下划线、或其他特殊符号开头,大小写敏感;
- 不可交叉嵌套;
- 特殊符号要使用实体;
- 注释和
HTML
一样
虽然可以描述和传输复杂数据,但是其解析过于复杂并且体积较大,所以实际开发已经使用很少了。
Ajax请求XML数据:
首先,新建一个XML
数据格式的文件-data.xml
:
Levi
18
新建一个PHP
文件-xml.php
:
在html
里面通过Ajax
获得数据:
var xhr = new XMLHttpRequest();
xhr.open("get","xml.php");
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status ==200){
console.log(xhr.responseXML); // 返回XML形式的响应数据
// DOM里面的api在xml里面同样适用
console.log(xhr.responseXML.getElementByTagName("name")[0].innerHTML); // 打印 Levi
}
}
responseXML
:获得XML
形式的响应数据。
在Ajax
中获取到XML
数据之后,需要通过xhr.responseXML
这个属性来获取数据,获取数据的时候可以直接使用DOM
提供的API
。responseText
也可以获取到数据,但是获取到的是字符串,无法通过dom
`api`来操作。
4.4.2 JSON数据格式
JSON
(JavaScript Object Notation
),是一种轻量级的数据交换格式,独立语言。
json
有别于一般的对象,虽然json
也是键值对的存在,但是json
的键必须要加双引号,而一般的js
对象可以不用加。
json数据的基本格式:
data:[
{ "name":"zs", "age":18, "skill":"吹牛" },
...
{ "name":"ww", "age":28, "skill":"睡觉" }
]
Ajax请求json数据:
前面我们知道了,前端在拿后台数据的时候,对后台数据处理提供了两个方法,一个是对字符串处理的responseText
方法,还有一个是对XML
格式处理的responseXML
方法,但是唯独没有处理json
数据的方法,所以我们需要借助于json
内置对象的JSON.parse
方法,将后台的返回的json
字符串,转换成json
对象。
JSON.parse(xhr.responseText);
新建一个PHP
文件-json.php
:
'Levi' ,'age'=>18,'skill'=>'帅' );
// json_encode 将对象数据转换成json格式的数据返回前端
echo json_encode($person);
?>
在html
里面通过Ajax
获得数据:
var xhr = new XMLHttpRequest();
xhr.open("get", "01-json.php");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 前端拿后台数据的时候,只有两种方式 responseText和responseXML
// 没有单独为json数据提供一个方法,所以需要将json字符串通过JSON.parse()方法,转换成对象jianrong
var jsonStr = xhr.responseText;
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // 打印的是一个对象
}
}
总结方法:
将json
字符串,转换成一个对象:JSON.parse(jsonStr);
// 注意,json字符串里面的属性必须是双引号包裹,单引号包裹会报错
var jsonStr = '{"name":"Levi","age":18,"skill":"帅"}';
var obj = JSON.parse(jsonStr);
console.log(obj); // 打印对象 {name: "Levi", age: 18, skill: "帅"}
将对象转换成json
格式的字符串:JSON.stringify;
var obj = {
name: "Levi",
age: "18",
skill: "帅"
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); //打印{"name":"Levi","age":"18","skill":"帅"}
4.5 Ajax代码的封装
一个页面中,肯定不只是一处需要 ajax
请求,所以我们可以将它封装成一个函数。
Ajax
对象获取响应头属性:
xhr.getAllResponseHeaders(); // 获取全部响应头信息
xhr.getResponseHeader('key'); // 获取指定头信息
代码封装:
// 封装前需要考虑的因素
// 1- 请求的方式
// get: 需要将数据拼接在url之后
// post: 需要加一个请求头,并且使用send方法将数据进行发送
// 2- 请求的url地址
// 3- 需要发送的数据
// 4- 添加回调函数success,将请求到的数据返回给调用的函数
// 判断服务器返回的是什么格式的数据(通过响应头)
// a- xhr.getAllResponseHeaders(); 获取全部响应头信息
// b- xhr.getResponseHeader('key'); 获取指定头信息
function ajax(options) {
// 默认值处理
// 设置默认的请求方式为type
options.type = options.type || "get";
// 设置默认的请求地址为当前地址栏地址
options.url = options.url || location.href;
// 设置默认的请求同步或者异步
options.async = options.async || "true";
// 设置请求参数data的默认值
options.data = options.data || {};
// 处理用户传进来的请求参数(data)对象
var dataArr = [];
for (var k in options.data) {
dataArr.push(k + "=" + options.data[k]);
}
var dataStr = dataArr.join("&");
// 异步请求对象兼容性处理
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// IE6及其以下版本
xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
};
// 判断当前的请求方式,如果是get,将数据拼接在地址后面
xhr.open(options.type, options.type == "get" ? options.url + "?" + dataStr : options.url, options.async);
// 当是post请求的时候,需要设置请求头
if (options.type == "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// 发送数据,当是post方式的时候,发送数据
xhr.send(options.type == "get" ? null : dataStr);
if (options.async) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 判断请求的数据是什么类型的
var type = xhr.getResponseHeader("Content-Type");
var result;
if (type.indexOf("json") != -1) {
// 如果是json格式的数据,就将其转换成js对象
result = JSON.parse(xhr.responseText);
} else if (type.indexOf("xml") != -1) {
// 如果是xml格式的数据,直接返回responseXML
result = xhr.responseXML;
} else {
// 如果两种格式都不是,直接返回responseText
result = xhr.responseText;
}
// 将处理好的数据进行传递
options.success(result);
}
}
} else {
// 如果是同步的话就不需要在监测状态改变的情况了
var type = xhr.getResponseHeader("Content-Type");
var result;
if (type.indexOf("json") != -1) {
result = JSON.parse(xhr.responseText);
} else if (type.indexOf("xml") != -1) {
result = xhr.responseXML;
} else {
result = xhr.responseText;
}
options.success(result);
}
}
// 调用ajax请求
ajax({
url: "json.php",
type: "get",
data: {name: "levi",age: 18},
success: function(data) {
console.log(data);
}
});
ajax({
url: "xml.php",
type: "get",
data: {name: "levi",age: 18},
success: function(data) {
console.log(data);
}
});
5. jQuery中的Ajax操作
前面的《jQuery
入门详解》中已经讲到了如何通过jQuery
操作Ajax
,这里再为大家总结一遍。
1、$.ajax()方式常用参数解析:
方法 | 作用 |
---|---|
url |
请求的地址 |
type |
请求的方式 |
dataType |
告诉jQuery ,需要按照什么格式对服务器返回的数据进行解析,默认json |
data |
数据 |
success |
请求成功的回调函数 |
error |
请求失败的回调函数 |
beforeSend |
请求发送之前调用的函数 |
complete |
不论请求是成功还是失败的,只要请求完成就会调用 |
timeout |
设置请求超时时间 |
示例代码:
$.ajax({
// 请求的地址
url: "04-data.php",
// 请求的方式
type: "get",
// 告诉jQuery,需要按照什么格式对服务器返回的数据进行解析,默认json
dataType: "json",
// 数据
data: {
msg: "我是来请求数据的"
},
// 请求成功的回调函数
success: function(data) {
console.log(data);
},
// 请求失败的回调函数
error: function() {
console.log("失败了");
},
// 请求发送之前调用的函数
beforeSend: function() {
console.log("请求发送之前调用的函数");
// 如果返回一个false,那么就会阻止整个请求的发送
// return false;
// 用法:可以用作表单验证,当表单内容符合规范的时候发送ajax请求,当不符合的时候就不发送ajax请求
},
// 不论请求是成功还是失败的,只要请求完成就会调用
complete: function() {
console.log("请求完成了");
},
// 设置请求超时时间(单位:ms),超过这个时间后,就不会请求了
timeout:2000
});
2、jQuery中的serialize方法:
serialize
方法会将表单中所有的内容拼接成key=value&key=value
这样的字符串。
通过这种方式就不要再去手动获取表单中的内容的
3、jQuery中的serializeArray方法:
上面的方法我们可以看到,获取整个数据的时候,是很简单,但是想要进行校验的话就很难,因为上面的方法获取的是一个字符串,不能进行校验,所以此时我们需要另外一个方法,jQuery
中的serializeArray
方法。
示例代码:ajax模拟表单校验及注册
sing in page
用户名不能为空
效果图:
6. 模板引擎的使用
模板引擎,就是将一段已经写好模板,使用数据进行填充之后生成 html
。
6.1 模板引擎的使用步骤
1、引入模板引擎插件:
2、创建script
标签,注意类型是type="text/template"
,并且要有一个id
,模板内部是需要渲染的内容:
3、调用template
方法,将数据渲染到模板内:
var obj = {
name:"Levi",
age:18
}
// template("模板的id",要将什么数据渲染到模板中)
var html = template("tpl",obj);
4、回到上面的模板部分,在里面添加占位符:
5、打印调用的字符串:
var html = template("tpl",obj);
console.log(html); // 打印的就是div字符串
6.2 模板引擎的其他用法
1、$data:
模板一级特殊变量可以使用 $data
,指的就是获取的数据;
{{$data["name"]}}
2、条件语句:
{{if value}}...{{/if}}
{{if value1}}...{{else if value2}}...{{/if}}
示例:
{{if age >= 18}}
我成年了
{{else}}
我没有成年了
{{/if}}
3、循环语句:
$index
指的是获取当前遍历的索引值;$value
指的是获取当前遍历的元素。
{{each target}}
{{$index}} {{$value}}
{{/each}}
示例:
效果图:
注意:这里介绍一个语法as v i
,可以手动指定$index
和$value
的量
4、变量:
{{set temp = data.content}}
示例:
5、标签“@”的用法:
当一个标签在页面以字符串形式显示的时候,加上“ @
”后就会当成标签去解析。
首先根据后台数据,动态创建一个信息表格:
前端渲染:
后台数据:
"}, {"name": "大乔", "age": 18, "gender": "female", "avatar": "
"}, {"name": "甄姬", "age": 18, "gender": "male", "avatar": "
"}]';
?>
根据上面的代码,我们可以动态生成一个表格:
看到问题所在了,在后台请求回来的图片地址直接以字符串的形式渲染到页面上了。
解决办法:只需要在头像占位那一栏里面加一个@
符号
{{each $data as v i}}
{{v.name}}
{{v.age}}
{{v.gender}}
{{@v.avatar}}
{{/each}}
再看效果图:
此时头像就可以显示了。
6.3 模板引擎原生语法
1、原生语法:
<%= name %>
2、原生语法判断语句:
<%= if(age == 18){ %>
我满18岁了
<% } %>
3、原生语法循环语句:
<% for(var i = 0; i < arr.length; i++){ %>
<%= arr[i].name %>
<% } %>
6.4 案例:Ajax模拟请求json数据案例
json
数据模拟后台数据:
{
"code": 200,
"msg": "OK",
"result": [{
"tc_id": "193",
"tc_name": "一代天骄葫芦娃",
"tc_roster": "攻城狮",
"tc_gender": "1",
"tc_cellphone": "",
"tc_email": "",
"tc_status": "0",
"tc_birthday": "1970-01-01",
"tc_join_date": "2017-06-15"
},
{
"tc_id": "194",
"tc_name": "用爱感化司马ad",
"tc_roster": "攻城狮",
"tc_gender": "0",
"tc_cellphone": "",
"tc_email": "",
"tc_status": "0",
"tc_birthday": "1970-01-01",
"tc_join_date": "1970-01-01"
}
]
}
html
页面Ajax
请求部分:
效果图:
6.5 案例:Ajax提供数据实现瀑布流
通过后台提供的图片信息,以及图片链接,动态的生成瀑布流。
首先需要后台提供的接口文档:
接口地址:waterfull.php
请求方式:get
接口参数:page:当前是第几页 pageSize:当前页面需要显示数据的条数
返回类型:json
返回数据:{page: 2,items:[{path:"./images/0011.jpg",text:"文本信息"}...]}
page:下一页的页码
items:返回当前页的数据
path:图片地址
text:图片下方的文本
后台程序以及数据(仅攻参考,不是前端的活):
waterfull.php:
$page, 'items'=>$result));/*{items:[]}*/
/*延时1秒返回数据*/
sleep(1);
?>
data.json:
[
{
"path": "./images/001.jpg",
"text": "一支素笔,一杯花茶,一段时光,浅笑又安然一场盛世的繁华,愿不倾城,不倾国,只倾我所有。只为过简单安稳的生活,单纯不平凡。一支素笔,一杯花茶,一段时光,浅笑又安然。早安!"
},
...
{
"path": "./images/100.jpg",
"text": "青春,青春,一场盛世不平凡。一支素笔,一杯花茶,一段时光,浅笑又安然一场盛世的繁华,愿不倾城,不倾国,只倾我所有。只为过简单安稳的生活,单纯不平凡。一支素笔,一杯花茶,一段时光,浅笑又安然。早安!"
}
]
Ajax请求后台数据,动态渲染瀑布流:
- 通过接口文档,以及活动模板将数据渲染到页面;
- 利用jQuery里面封装的瀑布流插件,实现瀑布流的布局;
- 通过页面中的“加载更多”按钮,控制显示的数据数量;
Ajax请求数据:
瀑布流
加载更多
其中jquery.waterfull.js
为封装的jQuery
瀑布流插件:
(function() {
$.fn.waterFull = function() {
//1. 确定一共多少列
var columns = 5;
//2. 获取每一个元素的宽度
var width = this.children().width();
//3. 计算间隔
var space = (this.width() - width * columns) / (columns - 1);
//声明数组来保存每一列当前的高度
var heightArr = [];
this.children().each(function(index, ele) {
//4. 为第一行的元素设置定位
if (index < columns) {
$(ele).css({
top: 0,
left: index * (width + space),
});
heightArr.push($(ele).height());
} else {
//除过第一行之外的所有的内容
//先计算当前所有列中最短的列
var minHeight = heightArr[0];
var minIndex = 0;
$.each(heightArr, function(index, value) {
if (minHeight > value) {
minHeight = value;
//找到了最短的列所在的索引
minIndex = index;
}
})
//将当前要摆放的元素的高度累加到当前列所对应的高度中
heightArr[minIndex] += $(ele).height() + space;
//就是最短列的高度加上间隔
var top = minHeight + space;
//因为已经找到了要把当前元素放在哪一列
//所以直接使用列的索引计算即可
var left = minIndex * (width + space);
$(ele).css({
top: top,
left: left,
})
}
//5. 将items的高度设置为最高的那一列的高度
var maxHeight = heightArr[0];
$.each(heightArr, function(index, value) {
maxHeight = maxHeight > value ? maxHeight : value;
})
console.log($(this));
$(this).parent().height(maxHeight)
});
}
})()
效果图:
除了手动点击按钮之外,我们还可以监听滚动条的位置,当在底部的时候直接调用加载函数:
$(window).scroll(function(){
// 获取滚动条当前滚动的距离
var scrollTop = $(this).scrollTop();
// 获取整个盒子的高度
var boxHeight = $(".box").outerHeight();
// 获取可视区的高度
var windowHeight = $(window).height();
// 判断当滚动条的高度大于等于盒子的高度减去可视区的高度的时候,调用加载函数
if(scrollTop >= boxHeight - windowHeight){
// 请求数据还需要判断下有没有disabled这个类,没有的时候才能加载
if(!$(".btn").hasClass("disabled")){
render();
$(".btn").text("正在获取数据").addClass("disabled");
}
}
});
7. Ajax请求模拟软件
Postman
是一款模拟Ajax
请求的软件,根据接口文档,输入请求地址,以及选择请求的方式,再输入需要请求的数据,就能模拟从后台,获取到数据。
根据图片的注释,我们可以大致了解这款软件的用法,根据接口文档填上信息,点击右上角send
,就会模拟发送Ajax
请求,response
返回请求的结果。
8. 同源策略
同源策略最初是在1995年时提出,到目前为止所有浏览器都实行这个政策。
8.1 什么是同源策略
最初它的含义是指,A网页设置的 Cookie
,B网页不能打开,除非这两个网页"同源",所谓同源就是必须要满足三个条件:
- 协议相同
- 域名相同
- 端口相同
举个例子:
http://www.abc.com/home/index.html
这个网址中,协议是http://
,域名是www.abc.com
,端口是80
(默认端口可以省略),下面看几个例子:
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.html http://www.a.com/b.html |
协议、域名、端口都相同 | 允许 |
http://www.a.com/a/a.html http://www.a.com/b/b.html |
协议、域名、端口都相同,不同文件夹下 | 允许 |
http://www.a.com/a.html http://www.a.com:8000/b.html |
协议、域名相同,端口不同 | 不允许 |
http://www.a.com/a.html https://www.a.com/b.html |
域名、端口相同,协议不同 | 不允许 |
http://www.a.com/a.html https://www.b.com/b.html |
协议、端口相同,域名不同 | 不允许 |
http://www.a.com/a.html http://70.32.92.74/b.html |
协议、端口相同,域名和域名对应ip | 不允许 |
8.2 同源策略的目的
同源策略的目的就是为了保护用户信息安全,防止恶意的网站窃取数据。
打个比方,你登录了某个网站A
,同时你又去浏览了另一个网站B
,如果B
网站能够读取你A
网站里存储的cookie
,会发生什么?你在A
网站里面的信息,将会被泄露,更可怕的是,cookie
往往用来保存用户的登录状态,如果用户没有退出登录,B
网站就可以冒充用户进行操作。所以“同源策略”是必须得。
8.3 限制范围
随着互联网的发展,“同源策略”越来越严格。目前如果非同源,共有三种行为受到限制:
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。
9. 跨域
同源策略规定, Ajax
请求只能发给同源的网址,否则就报错。
- 由于浏览器的同源策略,使用
XHR
对象进行跨域请求会直接被浏览器制止 -
html
一些标签中的src
属性也可以发送请求,相当于是发送了一个get
请求 -
src
属性中书写的地址,发送出去的请求,是不会受到浏览器同源策略的限制的
下面介绍三种解决跨域的方法
9.1 JSONP
JSONP
是服务器与客户端跨源通信的常用方法,最大的特点就是简单适用。老式浏览器全部支持,服务器改造非常小。
实现原理:
jsonp
的原理就是:动态的创建一个script
标签,将这个script
标签的src
属性设置为要请求的地址url
,将script
标签添加到页面之后,src
属性会自动向url
发送一个get
请求,又由于,后台返回的数据格式比较特殊,是一个函数调用的语句,所以我们提前定义好一个函数,那么这个函数就会在请求成功之后自动被调用,数据也会被传入到这个函数中,最终就类似于ajax
请求的回调的效果!
jQuery里的JSONP:
在jQuery
中,发送Ajax
方法的时候,只要定义一个dataType:"jsonp"
,即可实现跨域。
9.2 WebSocket
WebSocket
是一种通信协议,正常是由后台操控,使用ws://
(非加密)和wss://
(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
下面是一个例子,浏览器发出的WebSocket
请求的头信息。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
上面代码中,有一个字段是Origin
,表示该请求的请求源(origin
),即发自哪个域名。
正是因为有了Origin
这个字段,所以WebSocket
才没有实行同源政策。因为服务器可以根据这个字段,判断是否许可本次通信。如果该域名在白名单内,服务器就会做出如下回应。
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
(本篇完)
上一篇:JavaScript 进阶知识 - 特效篇(二)