06AJAX

最新推荐文章于 2024-11-07 01:22:08 发布

THL577

最新推荐文章于 2024-11-07 01:22:08 发布

阅读量698

点赞数 17

文章标签： ajax

本文链接：https://blog.csdn.net/qq_47774323/article/details/136193894

版权

AJAX

服务器

通俗的讲，能够提供某种服务的机器（计算机）称为服务器。

服务器类型

按照不同的划分标准，服务可划分为以下类型：
1、按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web 服务器等；
2、按操作系统可分为：Linux服务器、Windows服务器等；
3、按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、Node服务器等。

服务器软件

使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。
常见的服务器软件有：
1、文件服务器：Server-U、FileZilla、VsFTP等；
2、数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；
3、邮件服务器：Postfix、Sendmail等；
4、HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；

HTTP服务器

即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。
HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为服务端开发。
常见的运行在服务端的编程语言包括 PHP、Jsp、Asp、Python、Ruby、Perl等。

客户端

具有向服务器索取服务能力的终端，如比如 手机、电脑等，通过安装不同的客户端软件，可以获取不同的服务，比如通过QQ获得即时通讯服务、通过迅雷获得下载服务等。
常见的客户端软件：浏览器、QQ、迅雷、Foxmail等。
以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，通常称之为前端开发。

网络基础

IP地址

所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样)
查看本机IP地址 ping、ipconfig、ifconfig

域名

由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“面具”
查看域名对应的IP地址 ping、tracert

DNS服务

DNS记录了 IP 地址和域名的映射（对应）关系；
查找优先级 本机hosts文件、DNS服务器

端口

端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。
现实生活中，银行不同的窗口办理不同的业务。
查看端口占用情况 netstat -an
常见端口号 80、8080、3306、21、22

C/S和B/S

C/S结构

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

C/S（即Client、Server），在C/S结构的情况下，不同的服务需要安装不同的客户端软件，比如QQ、迅雷、Foxmail这种情况下安装的软件会越来越多，进而占用非常多的系统资源，除此之外还有其它弊端，比如A出差，需要在B电脑上查收邮件，但是B电脑并未安装Foxmail等类似的客户端软件，这样不得不先去下载Foxmail，非常不方便，并且客户端软件升级后也需要重新下载。

B/S结构

B/S（即Broswer、Server）解决了C/S所带来的不便，将所有的服务（如QQ、邮件等）都可以通过浏览器来完成，因为基本所有浏览器都安装了浏览器，这样可以更多的节省系统资源，并且功能升级也无需重新下载，只要刷新网页即可，要但B/S也有一些不利，比如操作稳定性、流畅度等方面相对较弱。

PHP基础

入门

内容输出
    echo：输出简单数据类型，如字符串、数值
    print_r()：输出复杂数据类型，如数组
    var_dump()：输出详细信息，如对象、数组（了解）

<?php
    // 设置编码格式
    header('content-type:text/html; charset=utf-8');
    //输出内容
    echo 'hello world';
    echo '你好，世界';
?>

变量

1、变量以$开头 字母/数字/下划线 不能以数字开头
2、大小写敏感（区分大小写）
3、数据类型：字符型、整型、浮点型、布尔型、数组、对象、NULL
    
<?php
    // 设置编码格式
    header('content-type:text/html; charset=utf-8');
    // 定义变量
    // 字符串
    $name = '张三';
    echo $name;
    // 输出换行
    echo '<br>';
    // 数字
    $num = 123;
    echo $num;
    // 小数
    $pi = 3.1415826;
    echo '<br>';
    echo $pi;
    // 布尔
    $male = false;
?>

运算符

基本与Javascript语法一致
. 号表示字符串拼接符，Javascript中为+号
    echo '<br>' . $name . $name;

函数

与Javascript基本一致
函数名对大小写不敏感
默认参数（了解即可）

分支、循环语句

选择语句
    switch (表达式){
        case 值:
            执行结果；
            break;
        default:
            执行结果；
            break;
    }

if循环语句
    for ($i = 0; $i < 10; $i++){
        echo '<br>' . $i;
    }

while循环语句
    $j = 0;
    while($j < 100){
        echo '<br>' . $j;
        $j++;
    }

数组

定义数组
	$arr = array('榴莲','西兰花','鸡蛋');

获取数组元素 下标从0开始
     echo $arr[2];

直接输出复杂类型
    print_r($arr);

获取数组长度
    echo count($arr);

循环遍历
    for ($i=0; count($arr); $i++){
        echo '<br>';
        echo $arr[$i];
    }

关系型数组
    $person = array('name'=>'吴京', 'film'=>'战狼', 'wife'=>'谢楠');

获取内容
    echo $person['name'];

完整输出数组
    print_r($person);

遍历数组
    foreach ($person as $key => $value){
        echo $key.'-----'.$value.'<br>';
    }

二维数组
    $starArr = array(
        array('name'=>'吴京', 'film'=>'战狼'),
        array('name'=>'刘德华', 'film'=>'无间道'),
        array('name'=>'黄渤', 'film'=>'斗牛')
	);

获取内容
    echo $starArr[2]['film'];

循环遍历
    for($i=0; $i<count($starArr); $i++){
        echo $starArr[$i]['name']. '出演了'. $starArr[$i]['film']. '<br>';
    }

文件引入

include 'php文件'；

require 'php文件'；

表单处理

<form action="" method="">
    <input type="" name="">
</form>
    action： 设置接收数据的处理程序
    method： 设置发送数据的方
    name： 用来提供给服务端接收所传递数据而设置的
    当上传文件是需要设置 enctype="multipart/form-data"，且只能post方式
    
$_GET接收 get 传值
$_POST接收 post 传值
    
$_FILES接收文件上传
    Array (
        [icon] => Array (
            [name] => 1405937554667.png  上传的文件名
            [type] => image/png 类型
            [tmp_name] => C:\Users\51772\AppData\Local\Temp\php52F7.tmp 路径 临时
            [error] => 0 错误编码
            [size] => 13949  大小
        )
    )
	移动上传的文件
        move_uploaded_file(移动的文件,移动到哪里去)
        move_uploaded_file($_FILES['icon']['tmp_name'],'./files/'.$_FILES['icon']['name']);
    
get方式
    数据总是拼接在url中
    数据安全性不好
    数据长度问题
    测试方便

post方式
    必须设置method='post'
    提交的数据不在url中，安全性好
    post提交数据没有长度限制
    如果上传文件必须使用post

常用PHP函数

是否在数组中
	in_array() 
计算数组长度
	count() 
检测数组中是否存在key
	array_key_exists ()
读取文件
	file_get_contents

网络传输协议

网络传输协议：指服务器和客户端间进行通信时的约束和规范
客户端与服务端的数据交互并不是杂乱无章的，需要遵照（基于）一定的规范进行。

常见协议
    HTTP、HTTPS 超文本传输协议
    FTP 文件传输协议
    简单邮件传输协议

HTTP协议

即超文本传输协议，网站是基于HTTP协议的，例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。
HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。
即HTTP协议主要由请求和响应构成。
常用请求方法 POST、GET、PUT、DELETE

请求/请求报文

请求由客户端发起，其规范格式为：请求行、请求头、请求主体。

请求行
	由请求方式、请求URL和协议版本构成
    Request URL: http://127.0.0.1/ajax/07update_file/
    Request Method: GET
    
请求头
	Host：localhost请求的主机
    Cache-Control：max-age=0控制缓存
    Accept：*/* 接受的文档MIME类型
    User-Agent：很重要
    Referer：从哪个URL跳转过来的
    Accept-Encoding：可接受的压缩格式

请求主体
	即传递给服务端的数据

post形式提交表单的时候，请求头里会设置，get形式当不需要
	Content-Type: application/x-www-form-urlencoded
	xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

响应/响应报文

响应由服务器发出，其规范格式为：状态行、响应头、响应主体。

状态行
	由协议版本号、状态码和状态信息构成
	Status Code: 200 OK

响应头
    Date：响应时间
    Server：服务器信息
    Content-Length：响应主体长度
    Content-Type：响应资源的MIME类型

响应主体
	即服务端返回给客户端的内容
	
MIME是标识文件类型的，文件后缀并不能正确无误的标识文件的类型。
客户端与服务器在进行数据传输的时候都是以字节形式进行的，咱们可以理解成是以“文本形式”传输
这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据，MIME就是明确告知浏览器该如何来处理。

状态码

常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误

状态码	含义
100-199	表示成功接收请求，要求客户端继续提交下一次请求才能完成整个处理过程
200-299	表示成功接收请求并已完成整个处理过程
300-399	为完成请求，客户需进一步细化请求
400-499	客户端请求有错误
500-599	服务器端出现错误

调试工具

利用HTTP抓包工具在开发中可以帮我们进行调试，常用抓包工具HttpWatch、Fiddler、Charles、FireBug等

浏览器插件
	Firebug、HttpWatch、chrome dev tools

代理软件
	Charles、Fiddler

AJAX编程

ajax
    即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。
    本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步
	xhr.open('请求方式', 'url');
    指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序
    其优势在于不阻塞程序的执行，从而提升整体执行效率。

同步
	xhr.open('请求方式', 'url'，false);
	请求响应之前什么事都干不了   一件一件的干
    
XMLHttpRequest
    XMLHttpRequest可以以异步方式的处理程序。
    浏览器内建对象，用于在后台与服务器通信,由此我们便可实现对网页的部分更新,而不是刷新整个页面。

请求

创建异步对象
    var xhr = new XMLHttpRequest();

请求行
    xhr.open('请求方式', 'url');
    get请求 
		数据是拼接在 url中的
    	xhr.open('get','xxx.php?name=jack&skill=painting');
	post请求
		xhr.open('post', 'xxx.php');
	

注册回调函数
    请求响应回来了触发
    xhr.onload =function () {
        console.log(xhr.responseText);
    }

请求头
    参数1：键名  参数2：值
    get请求
		可以省略设置请求头的操作，也可以随意写
    	xhr.setRequestHeader('heima', 'day day up');
	post请求
		在不发送数据时也可以省略,发送数据不能省略
        固定格式
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

请求主体发送
	get请求
		xhr.send(null);
    post请求
		发送数据写在send中
        key1=value1&key2=value2...
        不要加空格,需要紧密挨着
        xhr.send('name=西兰花&friend=鸡蛋');

响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

注册回调函数
    xhr.onload =function () {

    }
	在状态改变时触发  触发多次
    xhr.onreadystatechange = function(){

    }
状态变化
    xhr.readyState
    0时，UNSENT open尚未调用
    1时，OPENED open已调用
    2时，HEADERS_RECEIVED 接收到头信息
    3时，LOADING 接收到响应主体
    4时，DONE 响应完成

获取状态行
	获取状态码  如 200 404
    	xhr.status
	获取状态信息  如OK
    	xhr.statusText

获取响应头
	获取指定头信息
    	xhr.getResponseHeader('Content-Type');
	获取所有响应头信息
    	xhr.getAllResponseHeaders();

获取响应主体
	检测并判断响应头的MIME类型后确定使用responseText或者responseXML
    xhr.responseText;
	xhr.responseXML;

XML

XML是一种标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据）。
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

<?xml version="1.0" encoding="UTF-8" ?>
<!--xml只能使用双标签-->
<root>
    <name>张三</name>
    <age>18</age>
    <skill>唱歌</skill>
</root>

语法规则
    必须有一个根元素
    不可有空格、不可以数字或.开头、大小写敏感
    不可交叉嵌套
    属性双引号（浏览器自动修正成双引号了）
    特殊符号要使用实体
    注释和HTML一样

JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。
JSON体积小、解析方便且高效，在实际开发成为首选。

语法规则
    数据在名称/值对中
    数据由逗号分隔(最后一个健/值对不能带逗号)
    花括号保存对象方括号保存数组
    使用双引号
    
JSON的载体为字符串''包裹
    
JSON语法 -- 用来表示对象
    对象使用{}
    属性名必须用""包裹
    属性值必须使用""包裹，如果属性值是数值可以不使用""
        var JSONObject = '{"name":"张三","skill":"失忆"}';
        console.log(JSONObject);
    转换为对应的对象（数组）
        var Obj = JSON.parse(JSONObject);
        console.log(Obj);
        console.log(Obj.name + ":" + Obj.skill);

JSON语法 -- 用来表示数组
    对象使用[]
    必须用""包裹
        var JSONArr = '["大蒜","大葱","番茄"]';
        console.log(JSONArr);
    转换为对应的对象（数组）
        var Arr = JSON.parse(JSONArr);
        console.log(Arr);
        console.log(Arr[2]);

JSON语法 -- 对象数组
    var JSONObjArr = '{"name":"李四","friends":["张三","王五","赵六"]}';
    console.log(JSONObjArr);
	转换为对应的对象（数组）
    var ObjArr = JSON.parse(JSONObjArr);
    console.log(ObjArr);
    console.log(ObjArr.name);
    console.log(ObjArr.friends[1]);

JSON解析
    JSON数据在不同语言进行传输时，类型为字符串
    不同的语言各自也都对应有解析方法，需要解析完成后才能读取
    Javascript解析方法
    	eavl()、JSON对象 JSON.parse()、JSON.stringify()；
		JSON兼容处理json2.js
   	PHP解析方法
		json_encode()、json_decode()

封装

/**
 * 
 * @param option（键名 url type data success）
 */
function ajax(option) {
    var xhr = new XMLHttpRequest();
    if (option.type == 'get'){
        if (option.data){
            option.url += '?';
            option.url += option.data;
            option.data = null; //最后直接send
        }
    }
    xhr.open(option.type,option.url);
    if (option.type == 'post'){
        if (option.data){
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        }
    }
    xhr.onreadystatechange =function () {
        if (xhr.readyState==4 && xhr.status==200){
            var type = xhr.getResponseHeader('Content-Type');
            // console.log(type);
            //indexOf是否含有该字符串，不含有返回-1
            if (type.indexOf('json')!= -1){
                option.success(xhr.responseText);
            }else if (type.indexOf('xml')!= -1){
                option.success(xhr.responseXML);
            }else {
                option.success(xhr.responseText);
            }
        }
    }
    xhr.send(option.data);
}

jQuery中的Ajax

jQuery为我们提供了更强大的Ajax封装
jQuery Ajax介绍
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
    $('').事件(function () {
        $.get/post(地址,发送数据可以为字符串也可以为json对象,回调函数
    })

    $('').click(function () {
        $.get/post('backSendData.php','name=rose&husband=robot',function (data) {
        	console.log(data);
        })
    })
    
    $('').click(function () {
        $.get/post('backSendData.php',{name:'rose',husband:'robot'},function (data) {
        	console.log(data);
        })
    })

$.ajax({}) 可配置方式发起Ajax请求
    $('.ajax').click(function () {
        $.ajax({
            url: 'backJSON.php',
            type: 'get',
            data: 'name=rose&husband=robot',
            success: function (data) {
                console.log(data);
            }
        })
    })

$('form').serialize() 序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式 默认为get请求，如果是get可以不写
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据  若没有请求可以不写
beforeSend 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）

模板引擎

art-template
	https://aui.github.io/art-template/zh-cn/
	步骤
        导入模板引擎
        定义模板
        挖坑 起名字  一般是取决于 数据
        填坑 数据 服务器 ajax  回调函数
        使用

流行模板引擎
    Handlebars：https://handlebarsjs.com/guide/

同源&跨域

同源
	同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

跨域
    不同源则跨域
    
对比
    http://www.example.com/                   对比                   
    http://api.example.com/detail.html        不同源  域名不同       
    https//www.example.com/detail.html        不同源  协议不同       
    http://www.example.com:8080/detail.html   不同源  端口不同       
    http://api.example.com:8080/detail.html   不同源  域名、端口不同 
    https://api.example.com/detail.html       不同源  协议、域名不同 
    https://www.example.com:8080/detail.html  不同源  端口、协议不同 
    http://www.example.com/detail/index.html  同源    只是目录不同   

跨域方案
    1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
    2、document.domain + iframe
    3、window.name + iframe
    4、location.hash + iframe
    5、window.postMessage()

参考资料
	http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

JSONP

原理剖析
	其本质是利用了<script src=""></script>标签具有可跨域的特性
	由服务端返回一个预先定义好的Javascript函数的调用
	并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
	文件后缀并不能代表什么，关建我们要看服务器返回的内容，比如css.php

	返回的内容为 echo ‘body {background:color}’
	我们可以通过content-type:text/css来指定浏览器该如何解析，返回的内容

	同样我们也可以js文件以.php结尾，比如js.php 这时我们可以指定Content-Type: 				text/javascript可告知浏览器要以javascript来执行我们返回的内容
	如果返回的是一个javascript的一个函数调用
	那么在这个函数调用过程中可以将跨域请求来的数据以“实参”的传递过来
	并且这个实参一般是JSON格式的
	只能以GET方式请求
	
jQuery中的JSONP
    jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。
    jsonp 可以指定服务端接收的参数的“key”值，默认为callback
    jsonpCallback 可以指定相应的回调函数，默认自动生成
    设置dataType值为jsonp即开启跨域访问   dataType: 'jsonp'

XMLHttpRequest 2.0

技术总是在实践中不断更新的，XMLHttpRequest也不例外。

设置超时
    设置超时时间
    	xhr.timeout = 3000;
    监听超时事件
    	当请求超时，此事件就会被触发
    	xhr.ontimeout = function () {// code}

FormData
    提供了一个新的内建对象，可用于管理表单数据
    首先要获取一个表单元素form
    	var form = document.querySelector('#ajaxFrom');
    然后在实例化时 new FormData(form)，将表单元素form传进去
    	var formData = new ForData(from);
    追加数据
    	formData.append(键，值);
    会返回一个对象，此对象可以直接做为xhr.send(formData)的参数
    此时我们的数据就是以二进制形式传递了
    注意我们这里只能以post形式传递，浏览器会自动为我们设置一个合适的请求头
    
二进制
    我们上传文件是以二进制形式传递的
    我们可以通过表单<input type="file">获取到一个文件对象
    然后file.files[0]可以获取文件信息
    然后再利用var formData = new FormData() 实例化
    然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制
    最后将 formData 做为xhr.send(formData)的参数
    
上传进度
    利用XMLHttpRequest我们可以实现文件的上传
    并且我们可以通过xhr.upload.onprogress = function (ev) {// code}，监听上传的进度
    这时我们上传的进度信息会保存在事件对象ev里
    ev.loaded 表示已上传的大小，ev.total表示文件整体的大小
    var percent = ev.loaded / ev.total

orm
var form = document.querySelector(‘#ajaxFrom’);
然后在实例化时 new FormData(form)，将表单元素form传进去
var formData = new ForData(from);
追加数据
formData.append(键，值);
会返回一个对象，此对象可以直接做为xhr.send(formData)的参数
此时我们的数据就是以二进制形式传递了
注意我们这里只能以post形式传递，浏览器会自动为我们设置一个合适的请求头

二进制
我们上传文件是以二进制形式传递的
我们可以通过表单获取到一个文件对象
然后file.files[0]可以获取文件信息
然后再利用var formData = new FormData() 实例化
然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制
最后将 formData 做为xhr.send(formData)的参数

上传进度
利用XMLHttpRequest我们可以实现文件的上传
并且我们可以通过xhr.upload.onprogress = function (ev) {// code}，监听上传的进度
这时我们上传的进度信息会保存在事件对象ev里
ev.loaded 表示已上传的大小，ev.total表示文件整体的大小
var percent = ev.loaded / ev.total