AJAX 基础教程
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1></h1>
</body>
<script>
//第一种异步获取数据的方式
let xhr
let data
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET", 'https://api.myjson.com/bins/djdbh', true);
//每当readyState状态发生变化时就会调用此函数
//readyState有5个状态 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
//status有两个状态 200: 请求处理成功 404: 未找到页面
xhr.onreadystatechange = function () {
//确保再拿取到数据之后再对数据进行处理
if (xhr.readyState === 4 && xhr.status === 200) {
data = xhr.responseText;
var nodeData = document.querySelector("h1");
nodeData.innerHTML = data;
console.log(JSON.parse(data))
}else{
console.log('change')
}
}
xhr.send();
</script>
</html>
PHP的常见语法
PHP代码执行方式:
-
在服务器端执行,然后返回给用户结果。如果直接使用浏览器打开,就会解析为文本。
-
意思是说,需要浏览器通过 http请求,才能够执行php页面。
这里只列举常用的PHP语法,更为详细的语法教程可以查阅 api 文档。
第一段 php 代码
将 WampServer 跑起来,在D:\wamp\www下新建一个1.php
文件,代码如下:
1.php:
<?php
echo "hello smyhvae";
?>
在浏览器中输入http://127.0.0.1/2018-02-28/1.php
,效果如下:
代码的编写位置:
上方代码中,注意php语言的格式,第一行和第三行的格式中,没有空格。代码的编写位置在<?php 代码写在这里?>
。
注释
php 注释的写法跟 js 一致。
<?php
//这是单行注释
/*
这是多行注释
*/
?>
变量
-
变量以
$
符号开头,其后是变量的名称。大小写敏感。 -
变量名称必须以字母或下划线开头。
举例:
$a1;
$_abc;
数据类型
PHP支持的数据类型包括:
-
字符串
-
整数
-
浮点数
-
布尔
-
数组
-
对象
-
NULLL
定义字符串时需要注意:
-
单引号`` :内部的内容只是作为字符串。
-
双引号"" :如果内部是PHP的变量,那么会将该变量的值解析。如果内部是html代码,也会解析成html。
说白了,单引号里的内容,一定是字符串。双引号里的内容,可能会进行解析。
echo "<input type=`button` value=`smyhvae`>";
上面这个语句,就被会解析成按钮。
// 字符串
$str = '123';
// 字符串拼接
$str2 = '123'.'哈哈哈';
// 整数
$numA = 1; //正数
$numB = -2;//负数
// 浮点数
$x = 1.1;
// 布尔
$a = true;
$b = false;
// 普通数组:数组中可以放 数字、字符串、布尔值等,不限制类型。
$arr1 = array('123', 123);
echo $arr1[0];
// 关系型数组:类似于json格式
$arr2 = $array(`name`=>`smyhvae`, `age`=>`26`);
echo $arr2[`name`]; //获取时,通过 key 来获取
上方代码中注意,php 中字符串拼接的方式是 .
。要注意哦。
运算符
PHP 中的运算符跟 JavaScript 中的基本一致,用法也基本一致。
-
算数运算符:
+
、-
、/
、*
、%
-
赋值运算符:
x = y
、x += y
,x -= y
等。
举例:
<?php
$x = 10;
$y = 6;
echo ($x + $y); // 输出 16
echo ($x - $y); // 输出 4
echo ($x * $y); // 输出 60
echo ($x / $y); // 输出 1.6666666666667
echo ($x % $y); // 输出 4
?>
函数的定义
语法格式:
function functionName() {
//这里写代码
}
(1)有参数、无返回值的函数:
function sayName($name){
echo $name.'你好哦';
}
// 调用
sayName('smyhvae');
(2)有参数、参数有默认值的函数:
function sayFood($food='西兰花'){
echo $food.'好吃';
}
// 调用
sayFood('西葫芦');// 如果传入参数,就使用传入的参数
sayFood();// 如果不传入参数,直接使用默认值
(3)有参数、有返回值的函数:
function sum($a,$b){
return $a+$b
}
sum(1,2);// 返回值为1+2 = 3
类和对象
PHP中允许使用对象这种自定义的数据类型。必须先声明,实例化之后才能够使用。
定义最基础的类:
class Fox{
public $name = 'itcast';
public $age = 10;
}
$fox = new $fox;
// 对象属性取值
$name = $fox->name;
// 对象属性赋值
$fox->name = '小狐狸';
带构造函数的类:
class fox{
// 私有属性,外部无法访问
var $name = '小狐狸';
// 定义方法 用来获取属性
function Name(){
return $this->name;
}
// 构造函数,可以传入参数
function fox($name){
$this->name = $name
}
}
// 定义了构造函数 需要使用构造函数初始化对象
$fox = new fox('小狐狸');
// 调用对象方法,获取对象名
$foxName = $fox->Name();
内容输出
-
echo
:输出字符串。 -
print_r()
:输出复杂数据类型。比如数组、对象。 -
var_dump()
:输出详细信息。
$arr =array(1,2,'123');
echo'123';
//结果:123
print_r($arr);
//结果:Array ( [0] => 1 [1] => 2 [2] => 123 )
var_dump($arr);
/* 结果:
array
0 => int 1
1 => int 2
2 => string '123' (length=3)
*/
循环语句
这里只列举了foreach
、for
循环。
for 循环:
for ($x=0; $x<=10; $x++) {
echo "数字是:$x <br>";
}
foreach 循环:
$colors = array("red","green","blue","yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
上方代码中,参数一:循环的对象。参数二:将对象的值挨个取出,直到最后。
如果循环的是对象,输出的是对象的属性的值。
输出结果:
red
green
blue
yellow
php中的header()函数
浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作。在php中,我们可以根据 header 来设置这些内容。
header()函数的作用:用来向客户端(浏览器)发送报头。直接写在php代码的第一行就行。
下面列举几个常见的 header函数。
(1)设置编码格式:
header('content-type:text/html; charset= utf-8');
例如:
<?php
header('content-type:text/html; charset= utf-8');
echo "我的第一段 PHP 脚本";
?>
(2)设置页面跳转:
header('location:http://www.baidu.com');
设置页面刷新的间隔:
header('refresh:3; url=http://www.xiaomi.com');
php中的 get 请求和 post 请求
get 请求
可以通过$_GET
对象来获取。
举例:下面是一个简单的表单代码,通过 get 请求将数据提交到01.php。
(1)index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过 get 请求,将表单提交到 php 页面中 -->
<form action="01.php" method="get">
<label for="">姓名:
<input type="text" name="userName"></label>
<br/>
<label for="">邮箱:
<input type="text" name="userEmail"></label>
<br/>
<input type="submit" name="">
</form>
</body>
</html>
(2)01.php:
<?php
header('content-type:text/html; charset= utf-8');
echo "<h1>php 的get 请求演示</h1>";
echo '用户名:'.$_GET['userName'];
echo '<br/>';
echo '邮箱:'.$_GET['userEmail'];
?>
上方代码可以看出,$_GET
是关系型数组,可以通过 **$_GET[key
]**获取值。这里的 key 是 form 标签中表单元素的 name 属性的值。
效果:
post 请求
可以通过$_POST
对象来获取。
举例:下面是一个简单的表单代码,通过 post 请求将数据提交到02.php。
(1)index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过 post 请求,将表单提交到 php 页面中 -->
<form action="02.php" method="post" >
<label for="">姓名:
<input type="text" name= "userName"></label>
<br/>
<label for="">邮箱:
<input type="text" name= "userEmail"></label>
<br/>
<input type="submit" name="">
</form>
</body>
</html>
(2)02.php:
<?php
header('content-type:text/html; charset= utf-8');
echo "<h1>php 的 post 请求演示</h1>";
echo '用户名:'.$_POST['userName'];
echo '<br/>';
echo '邮箱:'.$_POST['userEmail'];
?>
上方代码可以看出,$_POST
是关系型数组,可以通过 **$_POST[key
]**获取值。这里的 key 是 form 标签中表单元素的 name 属性的值。
效果演示:
[外链图片转存失败(img-lMjRWZuW-1568712427956)(http://img.smyhvae.com/20180228_1145.gif)]
实际开发中,可能不会单独写一个php文件,常见的做法是:在 html 文件中嵌入 php 的代码。
比如说,原本 html 中有个 li 标签是存放用户名的:
<li>smyhvae</li>
嵌入 php后,用户名就变成了动态获取的:
<li><?php
echo $_POST[`userName`]
?></li>
php 中文件相关的操作
文件上传 $_FILES
上传文件时,需要在html代码中进行如下设置:
(1)在html表单中,设置enctype="multipart/form-data"
。该值是必须的。
(2)只能用 post 方式获取。
代码如下:
(1)index.html:
<form action="03-fileUpdate.php" method="post" enctype="multipart/form-data">
<label for="">照片:
<input type="file" name = "picture" multiple=""></label>
<br/>
<input type="submit" name="">
</form>
(2)在 php 文件中打印 file 的具体内容:
<?php
sleep(5);// 让服务器休息一会
print_r($_FILES); //打印 file 的具体内容
?>
演示效果:
上方现象可以看出:
-
点击提交后,服务器没有立即出现反应,而是休息了一会
sleep(5)
。 -
在
wamp/tmp
目录下面出现了一个.tmp
文件。 -
.tmp文件一会就被自动删除了。
-
服务器返回的内容中有文件的名字
[name] => computer.png
,以及上传文件保存的位置D:\wamp\tmp\php3D70.tmp
。服务器返回的内容如下:
Array ( [upFile] => Array ( [name] => yangyang.jpg [type] => image/jpeg [tmp_name] => D:\wamp\tmp\phpCC56.tmp [error] => 0 [size] => 18145 ) )
文件保存
我们尝试一下,把上面的例子中的临时目录
下面的文件保存起来。这里需要用到 php 里的 move_uploaded_file()
函数。#
格式如下:
move_uploaded_file($_FILES['photo']['tmp_name'], './images/test.jpg');
参数解释:参数一:移动的文件。参数二:目标路径。
(1)index.html:(这部分的代码保持不变)
<form action="03.fileUpdate.php" method="post" enctype="multipart/form-data">
<label for="">照片:
<input type="file" name = "picture" multiple=""></label>
<br/>
<input type="submit" name="">
</form>
(2)PHP代码:
暂略。
WampServer 中修改上传文件的大小
(1)打开 WampServer的文件php.ini
:
[外链图片转存失败(img-IzFnpPrp-1568712427958)(http://img.smyhvae.com/20180228_1454.png)]
(2)修改php.ini
中的如下内容:
设置文件最大上传限制:(值的大小可以根据需求修改)
file_uploads = On; 是否允许上传文件 On/Off 默认是On
upload_max_filesize = 32M; 设置 上传文件的最大限制
post_max_size = 32M; 设置 通过Post提交的最多数据
考虑网络传输快慢:这里修改一些参数:
max_execution_time = 30000 ; 脚本最长的执行时间 单位为秒
max_input_time = 600 ; 接收提交的数据的时间限制 单位为秒
memory_limit = 1024M ; 最大的内存消耗
C/S架构和B/S架构
C/S架构
是Client/Server这两个单词的首字母,指的是客户端,服务器。
优点:
-
性能较高:可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可。
-
界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果。
缺点:
-
更新软件:如果有新的功能,就要推出新的版本。
-
不同设备访问:如果使用其他的电脑,没有安装客户端的话就无法登陆软件。
B/S架构
是Browser/Server的这两个单词的首字母。指的是浏览器、服务器,是WEB兴起之后的一种架构。
现在所有的网站都是B/S架构,较为常见的例子有百度、知乎、网易云音乐Web等等,只需要通过浏览器即可使用.
优点:
-
更新简洁:如果需要更新内容了,对开发人员而言需要更改服务器的内容,对用户而言只需要刷新浏览器即可。
-
多设备同步:所有数据都在网上,只要能够使用浏览器即可登录使用。
缺点:
-
性能较低:相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。
-
浏览器兼容:处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一。移动设备兼容性较好,ie6已经越来越少人用了。
服务器分类
项目开发时,有三套环境:
-
Development 开发环境
-
Test 测试环境
-
Production 生产环境
程序员平时干活儿用开发环境;开发完成后,部署到测试环境;测试完成后,产品上线,部署到生产环境。
三套环境意味着三个服务器。
服务器类型
按类型分:
-
文件服务器
-
数据库服务器
-
邮件服务器
-
Web 服务器等
按软件分:
-
Apache 服务器
-
Nginx 服务器
-
IIS 服务器
-
Tomcat 服务器
-
Node 服务器等
按操作系统分:
-
Linux服务器
-
Windows服务器等
服务器软件
提供了某种服务的计算器,我们称之为服务器。那么这些赋予计算器各种服务功能的软件主要有哪一些呢?
常见的服务器软件有:
-
文件服务器:Server-U、FileZilla、VsFTP等;
-
数据库服务器:Oracle、MySQL、PostgreSQL、MSSQL等;
-
邮件服务器:Postfix、Sendmail等;
-
HTTP 服务器:Apache(免费、开源)、Nginx、IIS(微软的.net服务器)、Tomcat(java编程的服务器)、NodeJS 等。
使用 WampServer 搭建 HTTP服务
集成环境的分类
-
AMP:Apache + Mysql + PHP。
-
WAMP:windows + Apache + Mysql + PHP。
-
XAMPP:WAMP 是针对windows的,而 XAMPP 可以安装在Linux、Windows、MacOS、Solaris这些操作系统上面。
在windows平台下,如果想要一步到位安装好这些软件,可是使用软件 WampServer。
WampServer 的安装
去 WampServer 的官网下载软件。
测试访问
打开浏览器输入 127.0.0.1
查看显示的内容,如果是第一次安装,默认显示的应该是如下图片:
127.0.0.1 是回送地址,指本地机,一般用来测试使用,如果想要让其他电脑也能够访问,需要进行如下配置:
(1)关闭防火墙:
(2)修改httpd.conf文件:
因为 Apache 的配置默认不允许外部访问,我们需要修改配置。
打开文件c:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf
,通过搜索功能找到onlineoffline tag - don't remove
这句话,在第234行的 Allow from 127.0.0.1
的下面,加一行:Allow from all
。
然后将第192行的Deny from all
改为Allow from all
。
保存,然后重启 wamp 即可。
配置网站根目录
网站的根目录默认是在D:\wamp\www
。如果想修改这个根目录,可以这样改:
打开 Apache的配置文件 D:\wamp\bin\apache\Apache2.2.21\conf\http.conf
,如果是初次安装,找到178行的DocumentRoot "d:/wamp/www/"
,以及205行的<Directory "d:/wamp/www/">
,改这两个位置的路径即可。我们可以通过搜索关键字documentRoot
来定位。
静态网站和动态网站
静态网站:
-
访问的是实实在在保存在服务器上的文件。静态资源包括:html页面、css文件、js文件、图片等。
-
当内容、图片、界面需要更新时,直接修改.html文件。
动态网站:
-
当用户访问网站时,根据
某些逻辑
,动态生成对应的HTML、CSS、JS
代码给用户(这也就是web服务器开发的本质)。 -
通过某种手段,当有新的消息时,自动的完成网站的更新。
总结:
由于静态网站在维护的局限性,所以产生了动态网站。
实现动态网站的技术:php/jsp/.net/python等。
动态网站的原理:浏览器请求动态网站的页面(比如*.php),php拼接数据并动态生成html页面,然后将新生成的页面返回给浏览器
php 之所以被称为最好的语言,是因为:基本上,我们能够想到的功能,它都帮助我们封装成了方法。十分方便。
HTTP 协议
请求
客户端发出的请求,主要由三个组成部分:请求行、请求头、请求主体。如下图所示:
20180228_1505.jpg
1、请求行:
-
请求方法:GET or POST
-
请求URL
-
HTTP协议版本
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中需要手动设置)。
响应
响应报文是服务器返回给客户端的。组成部分有响应行、响应头、响应主体。
[外链图片转存失败(img-BiGYKQBu-1568712427960)(http://img.smyhvae.com/20180228_1510.jpg)]
1、状态行:
HTTP响应行:主要是设置响应状态等信息。
2、响应头:
Cookie、缓存等信息就是在响应头的属性中设置的。
常见的响应头如下:
Cache-Control
响应输出到客户端后,服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
下面,的设置让客户端对响应内容缓存3600秒,也即在3600秒内,如果客户再次访问该资源,直接从客户端的缓存中返回内容给客户,不要再从服务端获取(当然,这个功能是靠客户端实现的,服务端只是通过这个属性提示客户端“应该这么做”,做不做,还是决定于客户端,如果是自己宣称支持HTTP的客户端,则就应该这样实现)。
Cache-Control: max-age=3600
ETag
一个代表响应服务端资源(如页面)版本的报文头属性,如果某个服务端资源发生变化了,这个ETag就会相应发生变化。它是Cache-Control的有益补充,可以让客户端“更智能”地处理什么时候要从服务端取资源,什么时候可以直接从缓存中返回响应。
ETag: "737060cd8c284d8af7ad3082f209582d"
Location
我们在Asp.net中让页面Redirect到一个某个A页面中,其实是让客户端再发一个请求到A页面,这个需要Redirect到的A页面的URL,其实就是通过响应报文头的Location属性告知客户端的,如下的报文头属性,将使客户端redirect到iteye的首页中:
Location: http://www.google.com.hk
Set-Cookie
服务端可以设置客户端的Cookie,其原理就是通过这个响应报文头属性实现的。
Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
3、HTTP响应体:
如果请求的是HTML页面,那么返回的就是HTML代码。如果是JS就是JS代码。
抓包工具
常见的抓包工具有:Fiddler、Charles。
使用Ajax发送http请求(get&post请求)
同步和异步的概念
-
同步:必须等待前面的任务完成,才能继续后面的任务。
-
异步:不受当前任务的影响。
同源和跨域
同源
同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。
跨域问题的解决方案
从我自己的网站访问别人网站的内容,就叫跨域。
出于安全性考虑,浏览器不允许ajax跨域获取数据。
-
iframe:处于安全性考虑,浏览器的开发厂商已经禁止了这种方式。
-
JSONP:script 标签的 src 属性传递数据。
JSONP
JSONP(JSON with Padding):带补丁的 json,本质是利用了 <script src=""></script>
标签具有可跨域的特性,由服务端返回一个预先定义好的JS函数的调用,并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
我们知道, html标签的 src 属性是支持跨域的:
<img src="http://img.smyhvae.com/2016040101.jpg" alt="">
jsonp 就是利用这个特性实现的跨域,但用的是 script 标签。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- jsonp 就是 利用 src,实现的跨域 用的是 script标签 -->
<script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>
</body>
</html>
上方那一行的代码,意思是:刷新A服务器上的index页面后,会去请求 B 服务器上的 myData.php
这个页面。而且请求的方式是 get 请求。
但是 B 服务器上的页面不是你想请求就可以请求的,大家一起配合才可以。
具体实现步骤:
需要首先声明的是,jsonp 只能通过 GET 方式进行请求。
(1)A客户端的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 定义 eatFood()方法
function fn(data) {
console.log('我被调用了哦');
console.log(data);
}
</script>
<!-- 使用 script标签 发送了 get请求 去到了一个 php页面 -->
<script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>
我们来分析上方代码中的最后一行的那个url:A 客户端请求的是 B服务器上的 01.php
页面。url里有个callback1=fn
,意思是:callback1是A和B 之间的约定,约定后,将执行方法 fn。
其实,fn方法已经在最后一行代码中执行了。只不过,fn方法里的data数据,是从 B 服务器中获取的。
(2)B服务器端的代码:
<?php
$mycallBack = $_GET['callback1'];
$arr = array("zhangsan","lisi","zhaoliu");
echo $mycallBack.`(`.json_encode($arr).`)`; //字符串拼接
?>
代码解释:
第一行的callback1
是A和B之间的约定,二者必须一致。
echo语句中输出的内容,即使要返回给A客户端的内容,此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。
json_encode
指的是,将php对象转化为 json。
刷新A页面,输出结果为:
mycallBack(["zhangsan","lisi","zhaoliu"])
jQuery 中的 JSONP
我们知道,jQuery 中发送 Ajax 请求,格式是:
$("#btn").click(function(){
$.ajax({
url:"./data.php?callback1=fn",
dataType:"jsonp",
type:"get",
//jsonp:"callback1", //传递给B服务器的回调函数的名字(默认为 callback)
//jsonCallBack:"fn" //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
success:function(data){
alert(data);
//$("#showInfo").html(data);
},
error:function(e){
console.log(e);
}
});
});
那如果数据是 JSONP,上方代码则改为:
$("#btn").click(function(){
$.ajax({
url:"./data.php?fn",
dataType:"text",
type:"get",
success:function(data){
alert(data);
//$("#showInfo").html(data);
},
error:function(e){
console.log(e);
}
});
});
参考链接
模版引擎
引入
我们在使用ajax请求数据时,返回的如果是一个 JSON 格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果。那么这个包装得过程有没有简单的方法呢?
假设在 js 中有如下数据:
var obj = {
name:"fox",
age:18,
skill:"卖萌"
};
希望包装为:
<ul>
<li>姓名:fox</li>
<li>年龄:18</li>
<li>爱好:卖萌</li>
</ul>
我们可以通过模板插件来实现。
模版插件的原理
我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?
常见的模板引擎
ArtTemplate
标准语法:
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
渲染模板:
var data = {
title: `标签`,
list: [`文艺`, `博客`, `摄影`]
};
var html = template(`test`, data);
document.getElementById(`content`).innerHTML = html;
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/template-native-debug.js"></script>
<script src="js/jquery-2.2.0.js"></script>
<script id="tpl" type="text/html">
<h3><%= className %></h3>
<ul>
<% for(var i = 0; i< students.length;i++) { %>
<li><%= i+1 %>. <%= students[i] %></li>
<% } %>
</ul>
</script>
<script>
var data = {
className:"前端1期",
students:["张飞","刘备","诸葛亮","甄姬","小乔","汪汪"]
};
$(function (){
var html = template("tpl",data);
$("#demo").html(html);
})
</script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
效果: