1. PHP中的header
设置文本编码
设置编码格式为utf-8
header("Content-Type:text/html;charset=utf-8");
设置页面跳转设置跳转到百度首页
header("location:http://www.baidu.com");
设置页面间隔刷新
header("refresh:3;url=http://www.xiaomi.com");
2. http协议 超文本传输协议
基于请求--响应的协议
协议是w3c去指定,它是用来定义客户端浏览器与服务器进行通讯的一个标准。
http协议 请求--响应 的协议 request-response
客户端浏览器发送到服务器的数据,我们称为请求的数据格式。
发送请求又有两种方式 get post
发送到服务器的数据格式分为四部分
请求首行 请求头 请求空行 请求体
请求行: 由请求方式、请求URL和协议版本构成
请求头:
Host:localhost请求的主机
Cache-Control:max-age=0控制缓存
Accept:*/* 接受的文档MIME类型
User-Agent:很重要
Referer:从哪个URL跳转过来的
Accept-Encoding:可接受的压缩格式
get和post的区别
get:
1.get请求的参数在地址栏,不安全。
2.get请求参数的数据大小有限制。
3.没有请求体。
4.请求头比post要少一些,性能要高一些。
post:
1请求参数都在请求体当中,安全;
2请求的数据大小没有限制;
3有请求体;
4有一个特殊的请求头。
Content-Type:
Content-Type: application/x-www-form-urlencoded
服务器响应给客户端浏览器的数据,我们称为响应的数据格式。
响应首行 响应头 响应空行 响应体refresh:5;url=http://www.itheima.com
同步交互与异步交互:
同步交互:浏览器发送一个请求给服务器,服务器返回数据给客户端浏览器
客户端之前的界面会被覆盖掉,在响应的过程当中,客户端浏览器不能做其他事情.
异步交互:浏览器发送一个请求给服务器,服务器返回数据给客户端浏览器。优势在于不阻塞程序的执行,从而提升整体执行效率。
客户端之前的界面不会被覆盖掉,在响应的过程当中,客户端浏览器能做其他事情.
XMLHttpRequest可以以异步方式的处理程序。
3. send要写在open的下面,不然会出BUG。写在最下面。
js 提供了一个XMLHttpRequest 对象来帮助我们完成异步交互.
XMLHttpRequest 浏览器内建对象,用于在后台与服务器通信(交换数据),由此我们便可实现对网页的部分更新,而不是刷新整个页面。
通过这个对象发送http 请求,接收数据.
1:创建对象
2:打开连接
3:发送数据
4:接收数据.
<?php
$username=$_POST['username'];
echo $username;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 点击按钮,发送一个请求 -->
<input type="button" value="ajax post交互">
<script>
document.querySelector("input[type=button]").οnclick=function(){
var xhr=new XMLHttpRequest();
xhr.open("post","03ajax.php");
//post 提交必须有一个请求头 Content-Type:
//写在open和send之间,get请求可以不设置。
//这个请求头需要我们自己设置上去.
//我们setRequestHeader("","");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username=hahaha");
xhr.onreadystatechange=function(){
//判断服务器是否响应完成且响应是否成功
if(xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
alert(data);
}
}
};
</script>
</body>
</html>
4. 点击a标签后4秒后打印
<?php
header("Content-Type:text/html;charset=utf-8");
sleep(4);
echo "这个是服务器返回的数据";
?>
4. xmlHttp.open(method,url,async) 第三个参数:指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。
4. 响应报文
1、状态行
由协议版本号、状态码和状态信息构成
2、响应头
Date:响应时间
Server:服务器信息
Content-Length:响应主体长度
Content-Type:响应资源的MIME类型
5. 检测用户名是否已经存在的案例
注意这里的第17行的send()里因为username是获取的变量,所以那样写
6. 聊天框框案例 appendChild 这个C记得大写
PHP array_rand()函数
array_rand(array,number) 函数从数组中随机选出一个或多个元素,并返回。
number默认值为1,不写的话是默认返回一个,写了的话是返回键值对的键。这里返回的是索引
03chat.html
7. iframe标签 12306案例
8.
javascript:;
1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" οnclick="return false"></a>
点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP(实际测试发现 滚动条会滚到顶端)而以上四种方法仅仅表示一个死链接都表示是一个死链接不会跳转也不会返回到顶部.
9 API详解
10. XML
一种标记语言,类似HTML,用来传输数据,具有自我描述性。
语法规则:
1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号(浏览器自动修正成双引号了)
5、特殊符号要使用实体
6、注释和HTML一样
11. get方式的请求格式 请求空行我们看不到
get 方式提交 (客户端浏览器发送给服务器的数据)
//请求首行
//告诉服务器一些东西
GET /day07/code/form/01demo.php?username=zhangsan&age=11 HTTP/1.1
//请求头:是有请求头的名称,请求头的值来组成.
Host: www.taobao.com
Upgrade-Insecure-Requests: 1
//User-Agent:告诉服务器客户端浏览器的版本,操作系统的版本
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
//我使用google 浏览器发送一个请求给hao123 的服务器,这个时候我会给服务器一个
User-Agent 告诉服务器我客户端浏览器 的版本,
服务器 接收到请求,肯定能够获取到我客户端浏览器的版本。
你客户端浏览器的版本进行判断,如果你用的不是百度浏览器的
echo "<a href="http://www.baidu.com/baidu.exe">您的浏览器的存在安全风险,请跟新</a>";
//接收:告诉服务器,我客户端接收的数据类型.
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
//Referer:告诉服务器,我的当前的请求来自于那个页面.
//我的请求来自与那个页面
做什么:
1:广告流量统计
Referer:http://www.sohu.com
2:防盗链
比如我的网站上面有一个资源,dfafdsa.avi
通过一个超链接可以访问到。
假设是letv 乐视网站上面的 一个资源 dfafdsa.avi
http://www.letv.com/dasfasdf.avi
如果说从我本站上面的页面有可能点击一个超链接指向到
http://www.letv.com/dasfasdf.avi
http://www.letv.com
但是也有可能从别的站点,www.aiqiyi.com
超链接点击这个超链接指向到http://www.letv.com/dasfasdf.avi
这个时候肯定会给letv 带过去一个
Referer 请求头,这个头的值:www.aiqiyi.com
Referer: http://www.taobao.com/day07/code/form/01demo.html
网站:导流量.
//接收的压缩格式.服务端返回的数据的压缩格式.
Accept-Encoding: gzip, deflate, sdch
//接收的语言
Accept-Language: ,zh;q=0.8
请求空行(一般我们看不到)
请求体 (get 方式是没有请求体)
12. post方式的请求格式
POST /day07/code/form/02demo.php HTTP/1.1
Host: www.taobao.com
Content-Length: 9
Cache-Control: max-age=0
Origin: http://www.taobao.com
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
//内容类型:客户端发送给服务器的,post 提交才有的独有的一个请求头
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://www.taobao.com/day07/code/form/02demo.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8
zym=ahaha(请求体发送到服务器端的数据,post 方式才有的)
13. 响应
响应的数据格式四部分
1:响应首行
2:响应头
3:响应空行
4:响应体.
//响应首行
协议版本,200 状态吗 200 代表ok 成功
HTTP/1.1 200
//日期,服务器时间.
Date: Tue, 18 Oct 2016 01:29:26 GMT
//告诉客户端服务器的版本
Server: Apache/2.2.21 (Win32) PHP/5.3.10
X-Powered-By: PHP/5.3.10
//响应到客户端的内容
Content-Length: 14
//内容类型,告诉客户端浏览器,我这是一个文本,html 文本.
Content-Type: text/html
//响应体,浏览器会解析zhangsan<br>11 渲染页面
zhangsan<br>11
14. header("Content-Type:text/html";charset=utf-8);
14. HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
onreadystatechange是Javascript的事件的一种,其意义在于监听XMLHttpRequest的状态
15. 现在跟服务器的交互通过XMLHttpRequest 来完成,调用这个对象的api 发送请求,接收数据.
1、获取状态行(包括状态码&状态信息)
xhr.status//状态码
xhr.statusText//状态信息
2、获取响应头
xhr.getResponseHeader('Content-Type');//获取指定头信息
xhr.getAllResponseHeaders();//获取所有响应头信息
3、响应主体
xhr.responseText;
xhr.responseXML;
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
16. //这个交互应该怎么去做
1:我要获取到XMLHttpRequest 这个对象
2:根服务器建立连接 (地址,提交方式)
3: 发送数据给服务器
4:接收服务器返回的数据
17. xhr.readyState==4 && xhr.status==200
这里记得readyState里的S大写
18. responseText以字符串形式返回,responseXML是以XML形式返回。