一：ajax的理解
ajax是异步向服务器发送请求数据的一种技术，从服务器获取数据，ajax不必刷新整个页面，只需对局部页面进行更新，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。
二：客户端和服务器
请求和响应:向服务器索要数据的过程|把数据返回给客户端的过程.
三： 通信的基本过程:
1.请求 001 请求头(请求行+请求头):对客户端以及请求本身的描述信息002 请求体:提交的参数 如果是POST请求，则存放发送给服务器的参数
2.响应 001 响应头(状态行+响应头):对服务器端以及响应本身的描述
002 响应体:返回给客户端的具体的数据(重要)
003 响应行（响应状态码 + 原因短语）
3.一个完整的HTTP请求过程的七个步骤:
建立TCP连接
web浏览器向web服务器发送请求命令
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭TCP连接
4.HTTP状态码
100:信息类,表示web浏览器请求,正在进一步的处理中
200:成功,表示用户请求被正确接收正在进一步的处理中 200 OK
300:表示请求没有成功,客户端必须采取进一步的动作 例如301：返回301代码告诉客户端链接的变化，客户端保存新的链接，并 向新的链接发出请求，已返回请求结果
400:客户端错误,表示客户端提交的请求有错误 例如:404请求失败,意味着
请求中所引用的文档不存在
500:服务器错误 表示服务器不能完成对请求的处理,如500，50
四：表单发送网络请求
1.GET和POST请求:[1] 请求路径 用from属性action=“路径”
[2] 请求方法 method=“” 默认就是GET请求
[3] 如果有参数,应该以键值对的方式提交 通过name设置key
2.表单文件上传用post ，内存比较大
注意点:[1] 在服务器端如何获取客户端提交的文件 $_FILES
$_FILES[""] 获取post请求提交的文件
print_r($_FILES);
[2] 需要添加参数:enctype
[3] 文件上传到服务器端之后需要手动保存 move_upload_file
把文件保存到指定的路径
第一个参数:要移动的文件在哪里
第二个参数:目标路径
move_uploaded_file($_FILES['fileName']["tmp_name"],"demo.jpg");
文件上传:
[1] 请求路径 action
[2] 请求方法 method=post 只能是POST请求
[3] 告诉服务器端这是文件上传请求 enctype
[4] 服务器端获取文件:$_FILES
[5] 文件默认保存到临时路径,会被删除.move_upload_file
[6] 大文件上传需要配置服务器端
五：get请求和post请求
1. GET请求源码
01 创建请求对象var xhr = new XMLHttpRequest();
02 监听网络请求的状态
2.1 解析服务器返回的数据
处理请求成功和失败的回调
xhr.onreadystatechange = function () {
if (xhr.readystate == 4 && xhr.status==200){
xhr.responseText
}
}
03设置请求方法和请求路径
xhr.open("get",url,true); 参数一为请求方法，参数二为请求路径，路径是php的路径。参数三为是否为异步请求
04 发送网络请求
xhr.send();
注意点：
1. 兼容性处理
2. 请求成功和失败的判断 status == 200
3.缓存处理： 每次请求的路径都一模一样.添加随机数 + 时间戳
4.请求参数和中文处理
5.请求超时处理
获取html表单的name
PHP中可以通过$_GET 获取get的数据3
2.POST请求源码
01 创建请求对象var xhr = new XMLHttpRequest();
02 监听网络请求的状态
解析服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.readystate == 4 && xhr.status==200){
xhr.responseText
}
}
03 设置请求方法和请求路径
xhr.open("POST",url,true); 参数一为请求方法，参数二为请求路径。参数三为是否为异步请求
04 设置请求头
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
05 发送网络请求并设置参数
xmlhttp.send("txtName=roger&txtPwd=123");
获取html表单的name
PHP中可以通过$_POST 获取post的数据
3.GET和POST源码区别
1.请求方法是post和get2.post设置请求头信息 设置请求头的时候需要注意代码的位置
3.post参数作为send方法的参数提交
获取html表单的name
$_REQUEST 获取html表单的name属性值
4.GET和POST请求的区别
(1) 传递给服务器端的参数的处理不同GET请求,参数跟在URL后面
POST请求,参数放在请求体中提交
(2) 参数的限制
GET请求,对参数的大小和长度有限制
POST请求,没有限制
(3) 安全性
GET请求:安全性很差
POST请求:相对安全
安全性方法
1.对数据进行加密处理 + HTTP
001 编码(转码) ==> base64
002 加密
(1) 散列函数加密 MD5 SHA SHA256....
(2) 对称加密 DES 3DES AES
(3) 非对称加密 RSA
2.采用安全的传输协议 HTTPS(SSL) == 安全套接字协议
六：ajax的有点和缺点
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。
优点：1.异步请求，不会刷新整个界面
2.不需要插件支持
3.提升 Web 程序的性能(在传递数据的时候不必整体提交)
4.减轻服务器和带宽的负担
5.更好的用户体验
缺点：1.前进、后退的功能被破坏
2.搜索引擎的支持度不够
七：前端点击发送网络请求的过程
001 请求的参数：当前按钮的name属性，即this.name002 请求的方式：GET请求
003 请求成功之后通过split方法对服务器返回的响应体字符串进行切割，转换为数组
004 从数组中获取指定的元素更新页面UI
八：ajax数据传输的格式结构，xml和json
1.XML数据结构
php文件中1.在php文件中先加载XML的数据 用file_get_contents()加载，参数为XML文件路径
2.数据返回给html
html文件中
1.服务器返回的数据是XML数据
2.需要在后端文件中设置头部信息表明返回的数据类型是xml
3.解析PHP文件的返回值
4.根据获取的XML数据来更新UI
xml文件
头部写<?xml version="1.0" encoding="UTF-8" ?>
格式和html差不多，主要用于表示和传输数据
2.JSON数据结构
php文件1.先加载对应的JSON数据 用file_get_contents()加载只有一个参数为json文件路径
2.获取提交的参数$name = $_REQUEST["name"];
3.根据参数来筛选JSON数据
01.把JSON字符串 ==> PHP对象$obj = json_decode($datJSON,true);
02 把对象中指定key对应的value取出来,value是php的对象
03把PHP对象转换为JSON数据返回$json = json_encode($value);
头部写header("Content-Type: text/json; charset=utf-8");
html文件1.解析服务器返回的JSON数据,并且更新UI
2.转换:JSON字符串 ---> JS对象 [反序列化处理]
3.用json转为js对象方法
JSON.parse(xhr.responseText) 。json转为js对象
JSON.stringify(obj) 。js对象转为json
3.1 ES5不支持用eval eval:把字符串转换为js的代码,并且马上执行
处理方式:[1] 变量接收 [2] 包装成表达式
var temp = eval("("+xhr.responseText+")");
json返回值看是{}和[]哪种，{}要加圆括号，数组格式不用，ES5不支持
json文件：保存要拿到的数据，用{}开始
3.json数据转换格式
JSON是一种轻量级的数据结构，本质是一个字符串js对象和json互相转换
01.从js对象转换为 json 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'});
结果是 '{"a": "Hello", "b": "World"}'
02.从 JSON 转换为js对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}');
结果是 {a: 'Hello', b: 'World'}
json返回值看是{}和[]哪种，{}要加圆括号，数组格式不用
json和php对象互相转换把JSON字符串 ==> PHP对象$obj = json_decode($datJSON,true);
第一个参数:要转换为对象的JSON字符串
第二个参数:true
把PHP对象转换为JSON数据返回$json = json_encode($value);
九：jquery中的ajax使用方法
1.Ajax-load方法
语法:$(selector).load(URL,data,callback);
参数一为路径。路径后面可以加指定的id或者类名标签等
参数二为添加的参数(JSON对象|查询字符串)返回给服务器端。不要有空格
参数三为回调函数 一般不写
注意点:
1) 对返回的结果支持使用选择器来进行筛选
2)默认情况下,发送的是GET请求
3) load方法在使用的时候,支持提交参数到服务器端
参数的格式支持两种情况:
[1] JSON对象 发送的网络请求是POST请求
[2] 查询字符串 发送的网络请求是GET请求
2.Ajax-get方法
语法:$.get(url,data,function(respoonse,status,xhr){},dataType)
参数 url:请求路径
data:参数(JSON对象|查询字符串)
第三个参数:请求完成的回调函数
response:服务器返回的响应体
status: 网络请求状态(success | error)
xhr: 请求对象
dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text 一般不写
3.Ajax-post方法
语法:$.post(url,data,function(respoonse,status,xhr){},dataType)
参数 url:请求路径
data:参数(JSON对象|查询字符串)
第三个参数:请求完成的回调函数
response:服务器返回的响应体
status: 网络请求状态(success | error)
xhr: 请求对象
dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text 一般不写
4.Ajax-ajax方法
语法：
(1) $.ajax(url,{})
(2) $.ajax({})
参数：
url: 请求路径(不带参数)
type: 请求方法 GET|POST
data: 设置参数(JSON对象|查询字符串)
success:请求成功的回调函数
回调函数参数response:响应体
status:响应的状态
xhr:请求对象
async:设置是否发送异步请求 默认是异步
cache:是否要进行缓存处理
timeout:请求超时的时间
beforeSend:请求发送前要执行的回调函数
complete:请求完成执行的回调函数
context:设置所有回调函数中this(上下文)指向特定的jQ实例对象
dataType:预期服务器返回的数据类型
error:请求失败时调用此函数
回调函数参数XMLHttpRequest, textStatus, errorThrown
5.jQuery框架Ajax事件方法
1.jQ().ajaxStart() 监听网络请求开始(第一个)
2.jQ().ajaxStop() 监听网络请求结束(最后一个)
1.jQ().ajaxSend() 监听网络请求开始(每一个)
2.jQ().ajaxComplete() 监听网络请求结束(每一个)
6.jQuery框架Ajax序列化操作
1.把表单中所有的key-value转换为字符串
"data":$("form").serialize()
2.把表单中所有的key-value转换为查询字符串
$("#demo").serializeArray()
方法说明：
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
- //例1
- $("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
- //例2
- $("#feeds").load("feeds.php", {limit: 25}, function(){
- alert("The last 25 entries in the feed have been loaded");
- });
- $.get("test.cgi", { name: “John", time: “2pm" }, function(data){
- alert("Data Loaded: " + data);
- });
$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
$("span").html(result);
});jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
- $.getJSON("test.js", { name: “John", time: “2pm" }, function(json){
- alert("JSON Data: " + json.users[3].name);
- });
- $.getScript("test.js", function(){
- alert("Script loaded and executed.");
- });
- $("#msg").ajaxComplete(function(request, settings){
- $(this).append("<li>Request Complete.</li>");
- });
- $("#msg").ajaxError(function(request, settings){
- $(this).append("<li>Error requesting page " + settings.url + “</li>");
- });
- $("#msg").ajaxSend(function(evt, request, settings){
- $(this).append("<li<Starting request at " + settings.url+"</li<");
- });
- //当AJAX请求开始(并还没有激活时)显示loading信息
- $("#loading").ajaxStart(function(){
- $(this).show();
- });
- //当所有AJAX请求都停止时，隐藏loading信息。
- $("#loading").ajaxStop(function(){
- $(this).hide();
- });
- //当AJAX请求成功完成时，显示信息。
- $("#msg").ajaxSuccess(function(evt, request, settings){
- $(this).append("<li>Successful Request!</li>");
- });
- //设置默认的全局AJAX请求选项。
- $.ajaxSetup({
- url: “/xmlhttp/",
- global: false,
- type: “POST"
- });
serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
- function showValues() {
- var str = $("form").serialize();
- $("#results").text(str);
- }
- $(":checkbox, :radio").click(showValues);
- $("select").change(showValues);
- showValues();
- //从form中取得一组值，显示出来
- function showValues() {
- var fields = $(":input").serializeArray();
- alert(fields);
- $("#results").empty();
- jQuery.each(fields, function(i, field){
- $("#results").append(field.value + " “);
- });
- }
- $(":checkbox, :radio").click(showValues);
- $("select").change(showValues);
- showValues();
十：Ajax请求跨域访问
跨域：不是同源就是跨域造成跨域：浏览器造成跨域，为了安全
1..如何解决跨域
1.jsop方案
2.浏览器安装插件
3.服务器支持跨域
4.服务器桥接
2.jsonp和Ajax没有关系
josnp 跨域的一种解决方案
Ajax 是网络请求的一种技术
3.AJAX在发送网络请求的时候,只有相同的源(域)才可以访问,不能的源不能访问
4.同源(域):协议 + 主机地址（域名） + 端口号一致
5.跨域发送网络请求的解决方案:
(1) 在服务器端PHP文件设置响应头:header("Access-Control-Allow-Origin:*");
(2) 使用jsonP技术方案 在前端通过script标签来远程加载服务器端的数据
6.jsonP工作原理：
(1) 前端页面中,需要使用script先声明一个对应的函数，接收数据
(2) 在前面页面,需要使用第二script标签的src属性来链接远程的资源
(3) src属性链接到的资源是特定格式 ?callback=fn:刚好是方法的调用
7.jsonp原理: 要前端后台配合做
1.在本地定义一个函数用来接收数据
2.利用script 的src属性进行跨域
8. 前端需要做的事情
1.在本地顶一个函数用来接收数据
2.利用script 的src属性进行跨域,访问要跨域的服务器地址
function sum(num) {
alert(num);
}
<script src="jsonp.php?callback=sum"></script>
1.根据用户传递的参数接收函数名称
2.拼接函数 并且传递数据 执行函数
十一：本地数据存储cookie，seesionStorage，loaclStorage
cookie存储，封装在JQ文件中
用于在进行网页访问的时候，存储页面中的某些数据信息
注意点
001 使用cookie来进行数据存储的大小有限制，4KB
002 每个网页中存储cookie的个数（最多50）和每个网站中存储cookie的个数都有限制（200）
003 各个不同的浏览器对cookie的数量也不相同
004 cookie数据的过期时间
005 cookie是不可以跨浏览器的
006 cookie是不可以跨域的(跨域名)
设置和使用
读取页面中cookie的数据 默认为空
document.cookie
把数据保存到Cookie中
document.cookie = "name=Rose";
注意点:如果要存储多个数据要重复写
有效期:默认情况下是当前会话,等当前会话结束,数据就会被删除.
设置数据的过期时间 三天
var date = new Date();
date.setDate(date.getDate() + 3);
expires=“”+date
相同的域中可以访问cookie,不同域不能访问
协议://域名.后缀:端口号/资源
只有 （协议+域名+后缀+端口）号都相同才能相互访问
特点
1.页面中的cookie数据在发送网络请求的时候，会默认提交给服务器端
2.Cookie数据默认提交到服务器的时候保存到$_COOKIE
封装好的调用方法：增加和修改setCookie(key,value,day) ； day时间存储多长时间
查询getCookie(key)
删除removeCookie(key)
seesionStorage存储
设置和使用：
001 sessionStorage：会话存储技术（session-会话）
002 该技术和cookie一样，一样浏览器退出了，那么保存的数据就会退出
003 演示sessionStorage技术的相关操作
1.增加window.sessionStorage.setItem("name","rose")
2.修改window.sessionStorage.setItem("name","ls")
3.删除 window.sessionStorage.removeItem("name");
4.查询（获取）console.log(window.sessionStorage.getItem("color"));
5.清空console.log(window.sessionStorage.clear());
注意点
大小限制为2M左右
Storage是h5推出的，需要考虑到兼容性的问题
当用户关闭浏览器窗口后，数据会被删除。
loaclStorage存储在后台看数据
1.增加window.localStorage.setItem("name","rose")
2.修改window.localStorage.setItem("name","ls")
3.删除 window.localStorage.removeItem("name");
4.查询（获取）console.log(window.localStorage.getItem("color"));
5.清空console.log(window.localStorage.clear());
三个存储对比： （1）简单对比：保存在本地 + 没有时间限制
（2）大小比较：4K - 5M - 20M
（3）使用方式和sessionStorage相同
十二：应用程序缓存
封装在jquery文件中或者是框架文件中
1.创建一个文件
2.写上内容jQ文件夹中
3.在html文件中html标签写上manifest="demo.appcache"
h5推出的应用程序缓存，可以对Web页面进行缓存，并且可以在没有网络的情况下进行访问 。IE除外
优点：
1）支持离线浏览（没有网络的情况下依然可以查看）
2）速度更快，性能更好（使用缓存文件可以提高访问的速度）
3）减轻服务器端的压力 - 浏览器将只从服务器下载更新过或更改过的资源
十三：网络安全的原则
1.隐私的数据不能直接以明文的方式提交给服务器端，要密文方式
2.隐私的数据不能直接以明文的方式保存到本地
GET请求:参数直接跟在URL后面,很不安全.
POST请求:参数存在请求体中提交,相对安全.
黑客通过 服务器代理软件 | 拦截网络请求的工具.获取明文
base64编码:这种编码方式可以所有格式的文件都转换为文本.可以编码和解码。不安全 封装在JQ文件中
使用： 1.创建一个对象 var b = new Base64();
2.b.encode("520it") 编码
3.b.decode("QQ==") 解码
数据加密的常见方式:
[1] 哈希算法(散列函数-消息摘要函数) 封装在JQ文件中
经典算法:MD5 Sha sha256..
MD5算法特点: (1) 加密的过程是不可逆（数学不可以解码）.
(2) 所有的数据加密之后得到的密文长度是固定.
(3) 明文相同,密文一定相同.
(4) 明文不同,密文也一定不相同.
(5) 速度快,性能好.
经典应用: (1) 注册和登录.
(2) 文件的完整性验证(A-B) + 版权验证.
(3) 云盘秒传.
使用方法：hex_md5("520it")；
散列值也是密文
md5 是加盐进行加密
[2] 对称加密算法（单密钥加密） 封装在jquery中
经典算法:DES 3DES AES
DES算法特点: (1) 加密和解密使用相同的密钥.
(2) 加密和解密的速度快,性能好.
(3) 存在密钥传输安全的问题. 缺点
经典应用:身份号码--(加密)--密文----|----密文---(解密)---身份号码
使用方法：DES3.encrypt（key，str）加密 key是密钥，自己设置
DES3.decrypt(key, "XupdZhIkd5k=") 解密
[3] 非对称加密算法（双密钥加密）
经典算法:RSA 双方都有公钥和私钥，双方都保存了对方的公钥
算法特点:(1) 使用公钥进行加密,使用私钥进行解密.
(2) 加密和解密的速度慢,性能不好.只能对少量数据进行加密 。缺点
(3) 足够的安全.
注意点:可能遭遇中间人攻击(客户端得到的是一个伪造的公钥).
应用：SSH免密码登录
SSH免密码登录原理：
1.客户端生成公钥和私钥,并和服务端建立连接,将公钥发送给服务端;
客户端请求连接,服务端生成一段随机的字符串,将该字符串用客户端的公钥加密后和服务 端自己的公钥发送给客户端;
[4] 其他安全处理方式.
第三方CA需要对公钥进行(数字)签名 ==> 证书.
HTTPS安全传输协议 SSL
十四：php基本语法
(1) 变量 $str = "string";(2) 输出echo print print_r
echo $str; print_r($arrM[2]);
print_r函数:用来打印数组、变量或者是对象中的内容。
(3) 数组
$arrM = array(1,2,3,4,5,6);
(4) 函数
(5) 遍历操作
for($i = 0;$i<count($arrM);$i++)
(6) 字符串拼接用点
(7) 对象
$obj= array(“key”=>“value”)
(8) 语句结构 和js一样
php的.和js的+号一样，拼接作用
获取html表单的name
$_REQUEST[""] 获取html表单的name属性值
$_GET[""] 获取get的数据
$_POST[""] 获取post的数据
$_FILES[""] 获取post请求提交的文件
header("Content-type: text/html; charset=utf-8");
header("Content-type: text/xml; charset=utf-8");
header("Content-type: text/json; charset=utf-8");
php文件中设置头部为XML和JSON文件格式
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
