本地服务建立

wamp

  1. 地址栏中输入localhost会转到图形界面，点击your projects下的目录即可运行文件。—->仅限本地访问
  2. 地址栏中输入本机IP，非80端口加写端口号，也可以进入图形界面。—->用于在其他设备上共享

Form表单

请求：request

Method URL HTTP版本—请求头 字段：值————-消息头 —————-主体body

-

响应：response

HTTP版本 状态码 响应短语–响应头 ————-消息头 ————-响应的主体（返回的数据）

AJAX

ajax

定义：异步的js和XML，不刷新整个页面实现更新局部信息的技术。 作用： 1. 发送数据和服务器进行交互 2. 实现异步更新，不需要刷新整个页面

工作步骤

  1. 创建得到Ajax对象

     let xhr = new XMLHttpRequest();//创建一个Ajax对象

  2. 连接地址，准备好数据

     xhr.open(
     'GET',//发送方式
     'localhost/php.php',//请求地址
     true//为true代表异步执行
 )

  3. 发送

     xhr.send();//发送

  4. 接收数据完成

     xhr.onload = function(){
        
 }

Ajax工作流程

|工作流程|初始化，未发送|准备数据，连接地址|返回响应头|接收数据中| 接收数据完毕| |:——:| :——: | :——:|:——:|:——:|:——:| |英文表示|UNSENT|OPENED|HEADERS_RECEIVED|LOADING|DONE| |意义| | |未返回内容，只返回响应头|返回内容,数据量大,分批返回|数据完全接收完成| |readyState|0|1|2|3|4|

Ajax监控

xhr.onreadystatechange = function(){
    if( readyState === 4 ){//传输完成
    
    }
}

##get和post传输的不同

get方式

get方式是默认的传输方式，可以不用写GET，但是要在open()方法中的url地址后面跟上待验证的数据，手动添加上?和其他name标识，这样才能正确请求到数据，并返回验证结果

btn.onclick = function(){
	let xhr = new XMLHttpRequest();

	xhr.open(
		'GET',//默认为get
		//请求的地址要与url的指向对应，后面添加待验证的数据
		'http://localhost/ajax/backend/php/get.php?user='+ username.value,
		true
	)

	xhr.send();
	//收到响应
	xhr.onload = function(){
		console.log(xhr.responseText);
		tip1.innerHTML = xhr.responseText;
	}

}

post方式

post传输方式和get传输的最大不同就是send()方法是否带参数，get不用带参数，数据都跟在open中url链接后面，post则不能直接跟在后面，必须把数据写在send()中，并且要加上name标记。

post还要设置请求头，转为后端识别的编码。

username.onblur = function(){
    //创建Ajax对象
	let xhr = new XMLHttpRequest();
	//准备好链接和地址
	xhr.open(
		'post',//指定传输方式
		//请求的地址要与url的指向对应
		'http://localhost/ajax/backend/php/post.php',
		true
	)

	//设置post的传输类型，后端没有前端的三种类型，需要手动设置。
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
	
	//传输的数据写在send中。
	xhr.send('user='+username.value);
	
	//收到响应
	xhr.onload = function(){
		console.log(xhr.responseText);
		tip1.innerHTML = xhr.responseText;
	}
}

json–javascript Object Notation

从后端返回的数据，流行的数据格式是json数据格式，是一个字符串。是一种轻量级的数据交换格式。

json数据结构格式：

  1. “名称/值”对的集合’{“key”:value,”key2”:value}’ key值必须写双引号，value值可以是除了函数以外的任意类型。 如：
'{"name":"abc","age":18}'

JSON.parse(json)—将json字符串转为对象

let obj = [
	{
		name:'abcd',
		age:12
	},
	{
		name:'abcd',
		age:12
	},
	{
		name:'abcd',
		age:12
	}
]

let strjson = JSON.stringify(obj)//转为json字符串

console.log( JSON.parse(strjson) )//将json字符串转为对象
//[{…}, {…}, {…}]

JSON是全局函数，此方法是高版本浏览器提供的方法 低版本浏览器在JSON官网有提供的json2.js兼容

前端向后端发送数据只能是json字符串，后端发送过来的也是json字符串。

JSON.stringify(jsonObj,null,5)—将对象转为json字符串

let obj = [
	{
		name:'abcd',
		age:12
	},
	{
		name:'abcd',
		age:12
	},
	{
		name:'abcd',
		age:12
	}
]

let a = false;
let b = 1009;
let c = null;

let strjson = JSON.stringify(obj)//转为json字符串

console.log( JSON.stringify(obj,null,3) )//将对象转为json字符串，3个空格缩进
/*'[
   {
      "name": "abcd",
      "age": 12
   },
   {
      "name": "abcd",
      "age": 12
   },
   {
      "name": "abcd",
      "age": 12
   }
]'*/

console.log( JSON.stringify(a) )//将布尔值转为json字符串
//'false'

console.log( JSON.stringify(b) )//将数字转为json字符串
//'1009'

console.log( JSON.stringify(c) )//将数字转为json字符串
//'null'

上传的两种方式

通过form表单上传

<form 
	action="http://localhost/ajax/backend/post_file.php"
	method="post"
	enctype="multipart/form-data"
    >
	<input type="file" name="file" id="fileUp">
	<input type="submit" id="btn">
</form>

action指向上传到服务器的地址。 enctype：指定上传类型为二进制形式 method：上传都为post类型

点击submit会直接进行跳转。

通过Ajax进行上传

let xhr = new XMLHttpRequest();

xhr.open('post','http://localhost/ajax/backend/post_file.php',true)

console.dir( fileUp )

let fileth = new FormData();//创建一个对象。
fileth.append('file',fileUp.files[0])//append方法将文件转为二进制。

xhr.send(fileth);//将创建的对象发送出去。

xhr.onload = function(){
	//console.log(xhr.responseText)
}

利用input中file类型中有个属性files，它会记录选中文件的名称，size等特性。利用通过FormData()新创建的fileth对象对文件进行二进制编码上传。

监控上传进度—xhr.upload.onprogress

每次上传的过程中都会触发ajax对象的upload.onprogress事件。

xhr.upload.onprogress = function(ev){
    console.log(ev.loaded);//上传了多少
    console.log(ev.total); //上传文件总大小
}

跨域

域名：

baidu.com — 一级域名 baike.baidu.com — 二级域名 abc.baike.baidu.com — 三级域名

-

协议

有多种协议： http https ftp mail file

-

端口

默认端口 http:80 http:443

jsonp–非正式传输协议

要点：允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住jsonp数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp = json + padding

JSONP一定是get的。

流程： 先创建一个script标签，src地址赋值远程地址，

原生js实现Jsonp跨域的步骤

  1. 定义获取数据后调用的回调函数
  2. 动态生成对服务端JS进行引用的代码
    • 设置url为提供jsonp服务的url地址，并在该url中设置相关callback参数。
    • 创建
    • 把
  3. 将客户端发送的callback参数作为函数名来包裹住jsonp数据，返回数据至客户端。

Ajax和Jsonp的异同点

  1. Ajax的核心是通过XmlHttpRequest获取非本页内容，而Jsonp的核心是动态添加
  2. Ajax和jsonp都可以实现跨域，只不过Ajax可以绕道通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取

localStorage

数据持久化，数据存在本地，每个域名下都有一个localStorage，不同域名下是不能共享的。

存在时间：除非被清除，否则永久存在

localStorage可以在多个标签页中互相访问用于持久化的本地存储，可以在多个标签页中互相访问,除非主动删除数据，否则数据是永远不会过期的。

本地存储是以key - value的形式存在的，但是value值是以字符串类型存储的，所以数组对象之类的会被转为字符串，为了方便下次使用，可以使用json字符串形式存储，下次直接JSON.parse()转为对象即可。

localStorage.setItem('abc',JSON.stringify('这是一句话'));

有向localStorage中添加删除修改数据的时候，都会出触发storage这个事件

window.addEventListener('storage',function (){
	console.log('我改变了数据');	
});
//只要操作了localStorage，就会触发全局事件storage。
localStorage.setItem('abc','这是value');

sessionStorage – 暂时存储

存入数据 sessionStorage.setItem(‘user’, JSON.stringify(user)) 删除数据 sessionStorage.removeItem(‘user’)

定义：是由W3C组织提出，最早由Netscape社区发展的一种机制。由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

cookie的基本操作