小白学习ajax-物联网技术文章-傲云油气装备网

HTTP学习

1.概念
1.客户端与服务器超本文无状态传输协议
2.http默认端口80
3.https 默认端口 443

2.请求方法
1.options：测试有哪些方法可以用
2.get：获取服务信息
3.Post：修改与更新，新增服务器信息
4.put：新增
5.delete：删除
6.head 只返回头信息
7.trace：回显头信息，用来测试
8.connect：管道形式连接

3.请求过程
建立tcp连接客户端发送请求头+请求体服务器响应请求头+请求体，关闭tcp连接客户端渲染内容
1.客户端发起 http请求建立tcp连接
2. 客服端（浏览器）发送请求信息（状态行请求头空行请求体）
3. 服务的响应请求信息（状态行响应头空行响应体）
4. 客服关闭tcp网络连接
5. 客户端（浏览器）渲染内容

4常见的http响应码
1.
100：这个状态码是告诉客户端应该继续发送请求，这个临时响应是用来通知客户端的，部分的请求服务器已经接受，但是客户端应继续发送求请求的剩余部分，如果请求已经完成，就忽略这个响应，而且服务器会在请求完成后向客户发送一个最终的结果
2.
200：这个是最常见的http状态码，表示服务器已经成功接受请求，并将返回客户端所请求的最终结果

202：表示服务器已经接受了请求，但是还没有处理，而且这个请求最终会不会处理还不确定
204：服务器成功处理了请求，但没有返回任何实体内容，可能会返回新的头部元信息
301：客户端请求的网页已经永久移动到新的位置，当链接发生变化时，返回301代码告诉客户端链接的变化，客户端保存新的链接，并向新的链接发出请求，已返回请求结果
404：请求失败，客户端请求的资源没有找到或者是不存在
500：服务器遇到未知的错误，导致无法完成客户端当前的请求。
503：服务器由于临时的服务器过载或者是维护，无法解决当前的请求，以上http状态码是服务器经常返回的状态代码，用户只能通过浏览器的状态了解服务器是否正常运行，一般除了错误的状态码，都不会看到服务器的状态码的，新SEOer你们了解到了吗？内容编辑来自51特色购SEO优化人员，想了解更过状态码的知识可以加我好友，一起相互交流学习

5.同步异步
概念理解:
**“同步”**就好比：你去外地上学(人生地不熟)，突然生活费不够了；此时你决定打电话回家，通知家里转生活费过来，可是当你拨出电话时，对方一直处于待接听状态(即：打不通，联系不上)，为了拿到生活费，你就不停的oncall、等待，最终可能不能及时要到生活费，导致你今天要做的事都没有完成，而白白花掉了时间。打不通电话，阻塞了。

异步就是：在你打完电话发现没人接听时，猜想：对方可能在忙，暂时无法接听电话，所以你发了一条短信(或者语音留言，亦或是其他的方式)通知对方后便忙其他要紧的事了；这时你就不需要持续不断的拨打电话，还可以做其他事情；待一定时间后，对方看到你的留言便回复响应你，当然对方可能转钱也可能不转钱。但是整个一天下来，你还做了很多事情（非阻塞）。或者说你找室友临时借了一笔钱，又开始happy的上学时光了。

阻塞和非阻塞强调的是程序在等待调用结果（消息，返回值）时的状态

同步和异步强调的是消息通信机制

6.原生get 原生post
　Get方式:

用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。

Post方式:

当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST方式传送数据量大，处理效率没有get方式高，数据不会被缓存，对于账号和密码等，比较安全。

7.地址url的组成
// 地址分享
// https://www.520mg.com/ajax/echo.php?name=mumu&age=18#top
// protocol: “http:” 协议
// host: “www.520mg.com” 域名
// pathname: “/ajax/echo.php” 地址
// port: 80 /443端口号
// search: “?name=mumu&age=18” 查询条件
// hash: “#top” 哈希值

8.浏览器的同源策略
// 当从本地网页获取服务器资源(ajax) 要求被请求的地址与当前地址要保持同源
// 协议一致 file http https
// 域名一致 520mg.com baidu.com
// 子域名一致 music.qq.com game.qq.com不同的子域名
// 端口号一致 127.0.0.1:8080 127.0.0.1:8888 不同端口号,

// http://127.0.0.1:8088/ajax/demo3-ajax-post.html
// "http://localhost/echo.php
域名不一致端口号不一致

9.理解跨域，跨域的方法
// 跨过浏览器的同源策略（跨域名）请求数据：在实际的工作的经常需要的功能
// 01 后端响应头cos跨域
Access-Control-Allow-Origin *
// php：header(“Access-Control-Allow-Origin: *”);
// 02 jsonp跨域
// 03 （开发阶段）代理跨域

ajax

1.名称：异步的javascript and xml

2.原理
1.通过 XMLHttpRequest 与服务器交换数据
2.服务数据通过json 或者 xml格式返回
3.浏览器端通过js+ccs渲染展示数据

3.Post
1.新建ajax对象
var xhr = new XMLHttpRequst()
2. 打开连接
xhr.open(“POST”,url,fasle)
3. 设置头信息(get省略)
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4. 监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState4&&xhr.status200){}
}

返回的数据 xhr.responseText

5.发送
xhr.send(“name=mumu&age=18”)

3.script 标签的src属性没有同源策略限制
// 浏览器的同源策略
// 当浏览器向服务器请求数据（ajax）需要被请求的地址与当前的网址同源
// 同源：协议一致http 子域名一致 pan.baidu new.baidu 域名一致 qq.com 端口号一致:8081
// https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=__jp1

// script 标签的src属性没有同源策略限制
// 已经后后端约定好返回的数据格式是方法名(数据) jp({data…}) 执行函数并传参

jquery中ajax

1.第一层 $.ajax()
2.第二层
$.get
1.回调函数
$.get(url,function(data,status,xhr){})
2. .done()
.fail()
.always()
3. .then()
.catch()

$.post(url,data,function(data,status,xhr))

3.第三层
$.getJSON()
$.getScript()
load()

url组成

1.https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate
2.https 协议
3.www子域名
4.520mg.com 域名
5.:443 端口号
6./ajax/echo.php 路径
7.?name=mumu&age=18 查询条件
8.#cate 哈希值

浏览器同源策略

1.当浏览器去访问服务器资源（ajax）要求服务器的地址与浏览器同源
2.协议，域名，子域名，端口号要一致

跨域

1.绕过浏览器的同源策略，请求到数据

2.跨域方式
1. 服务器响应头信息跨域
Access-Control-Allow-Origin: *
2. jsonp跨域
3. 服务器代理（开发）

异步，同步

同步胡阻塞代码执行

http响应码

1xxx
开始

2xx
成功

3xx
重定向

4xxx
客户端请求地址错误

5xx
服务器错误

案例解析读背

案例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>同步</title>
	</head>
	<body>
		<script>
			// console.log(100);
			// alert(200);
			// console.log(300);
			console.log(100);
			setTimeout(()=>{
				console.log(200);
			},2000)
			console.log(300);
		</script>
	</body>
</html>

案例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax get</title>
	</head>
	<body>
		<button id="btn">发送</button>
		<p id="content"></p>
		<script>
			btn.onclick = function(){ //按钮单击事件
			// 01 创建xhr
			var xhr = new XMLHttpRequest();
			// 02 open打开连接
			xhr.open("GET",'./be.txt',false);		
			 
			
		
			// 03 监听readystate  readyState 4准备状态完毕
			//  status 状态码200 响应成功
			xhr.onreadystatechange=function(){
				if(xhr.status==200&&xhr.readyState==4){
					content.innerHTML= xhr.responseText;
					 
					// responseText 返回的文本
				}
			}
			// 04 send 发送
			xhr.send();
			// 05 实现渲染
				
			}
		</script>
	</body>
</html>

案例三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax get</title>
	</head>
	<body>
		<input type="text" id="name" placeholder="请输入用户名">
		<input type="text" id="age" placeholder="请输入年龄">
		<button id="btn">发送</button>
		<p id="content"></p>
		<script>
			btn.onclick = function(){
				// 01 创建xhr对象
				var xhr = new XMLHttpRequest();
				// 02 获取数据
				var name = document.getElementById("name").value;
				var age =  document.getElementById("age").value;
				// 03 建立连接
				xhr.open("POST","http://localhost/echo.php",false);
				// 04 监听
				xhr.onreadystatechange = function(){
					if(xhr.status==200&&xhr.readyState==4){
						content.innerHTML = xhr.responseText;
					}
				}
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				//设置编码形式
				xhr.send(`name=${name}&age=${age}`);
				
			}
			// 浏览器同源策略
			// 当从本地网页 获取服务器资源(ajax) 要求被请求的地址 与当前地址要保持同源
			// 协议一致 file http  https
			// 域名一致  520mg.com  baidu.com
			// 子域名一致 music.qq.com game.qq.com 不同的子域名
			// 端口号一致 127.0.0.1:8080   127.0.0.1:8888 不同端口号,
			
			// http://127.0.0.1:8088/ajax/demo3-ajax-post.html
			// "http://localhost/echo.php 域名不一致端口号不一致
			
			// 跨域：
			//  跨过浏览器的同源策略（跨域名）请求数据：在实际的工作的经常需要的功能
			// 01 后端响应头cos跨域 Access-Control-Allow-Origin *
			// php：header("Access-Control-Allow-Origin: *");
			// 02 jsonp跨域
			// 03 （开发阶段）代理跨域
			
			// 地址分享
			// https://www.520mg.com/ajax/echo.php?name=mumu&age=18#top
			// protocol: "http:" 协议
			// host: "www.520mg.com" 域名
			// pathname: "/ajax/echo.php" 地址
			// port: 80 /443端口号
			// search: "?name=mumu&age=18" 查询条件
			// hash: "#top" 哈希值
			
			 
			
			
			
			// onclick 单击事件
			//  Http Http
			// Request 请求
			// Element 元素  by通过  id
			// ready准备 state状态  change 更改
			// status 状态码  readyState响应状态
			// innerHTML 内部HTML  
			// response 响应 Text 文本
			// set 设置 Request 请求 Header头 
			// content-type 内容类型   application程序 form表单   url统一资源地址 encoded 编码
			// send 发送
		</script>
	</body>
</html>

案例四

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>加载</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
	// 目标，单击加载 去下载be.html内容放入在con 里面
	$(function(){
		$("button").click(function(){
			$(".con").load("./be.html .content");
		})
	})
	
	
	
	// jquery中的ajax 有三层
	//  底层  $.ajax()
	//  中    $.get() $.post()
	//  上    $.getJSON()  $.getScript  load()
</script>
	</body>
</html>

案例五

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>getScript</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  单击按钮  加载js 执行js
$(function(){
    $("button").click(function(){
        $.getScript("./script.js");
    })
})
 
</script>
	</body>
</html>

案例六

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>getJSON</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  单击按钮  加载be.json 放入到con 
$(function(){
    $("button").click(function(){
        $.getJSON("./be.json",function(data,status,xhr){
            console.log(data,status,xhr);
            // data be.json 里面的数据
            // status 状态 success 成功
            // xhr 封装好的jquery xhr对象
            // JSON.stringif 把js对象转换字符串
            $(".con").text(JSON.stringify(data));
        })
    })
})
 
</script>
	</body>
</html>

案例七

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>get</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  单击按钮   加载文本 be.txt
$(function(){
    $("button").click(function(){
        $.get("./be.txt")
        .done(res=>{//成功
            $(".con").text(res);
        })
        .fail(err=>{
            console.log(err)
        })
        .always(xhr=>{
            console.log("成功失败都执行",xhr);
        })
    })
})

// done 完成
// fail 失败
// always 总是
 
</script>
	</body>
</html>

案例八

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>get</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  单击按钮   加载文本 be.txt
$(function(){
    $("button").click(function(){
        $.get("./b.txt")
        .then(res=>{
            $(".con").text(res)
        })
        .catch(err=>{
            console.log(err)
        })
    })
})
// 任意jq的ajax 都可以有这几种表现形式
// 1. 回调函形式  $.get(url,function(data,stata,xhr){})

// 2. promise  .done() .fail() .always()

// 3. promise  .then().catch()

// done 完成
// fail 失败
// always 总是


 
</script>
	</body>
</html>

案例九

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>get</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  单击按钮   加载文本 be.txt
$(function(){
    $("button").click(function(){
        $.get("./be.txt")
       
    })
})

// done 完成
// fail 失败
// always 总是
 
</script>
	</body>
</html>

案例十

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button>get</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  单击按钮   加载文本 be.txt
$(function(){
    $("button").click(function(){
        $.get("./be.txt",function(data,status,xhr){
            if(status=="success"){
                $(".con").text(data);
            }
        })
    })
})
 
</script>
	</body>
</html>

案例十一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <input type="text" id="name" placeholder="用户名"/>
        <input type="text" id="age" placeholder="年纪"/>
	<button>发送</button>
	
	<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//  
$(function(){
    $("button").click(function(){
    // 目标：发送 age 和name到后端
    var name = $("#name").val();
    var age = $("#age").val();
    // var  data = {name,age};
    $.post("https://www.520mg.com/ajax/echo.php",`name=${name}&age=${age}`)
    .then(res=>{
        $(".con").text(res);
    })
    .catch(err=>{
        console.log(err);
    })
    })
})
 
 
</script>
	</body>
</html>

案例十二jsonp原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jsonp原理</title>
	</head>
	<body>
	 
<script>
// 浏览器的同源策略
// 当浏览器向服务器请求数据（ajax）需要被请求的地址与当前的网址同源
// 同源：协议一致http  子域名一致 pan.baidu new.baidu  域名一致  qq.com 端口号一致:8081 
// https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=__jp1

// script 标签的src属性没有同源策略限制
// 已经后后端约定好 返回的数据格式是  方法名(数据)   jp({data...}) 执行函数并传参
function jp(data){
	console.log(data);
}
// jp({name:"mumu",age:18})
</script>
<script src="https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=jp"></script>

</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jsonp原理</title>
	</head>
	<body>
	 
 <script>
	function abc (data){
		alert(data);
	}
 // 127.0.0.1/weather.txt
 // ajax 获取会有浏览器的同源策略的限制
 // script 标签 src没有同源策略限制
 </script>
 <script src="http://127.0.0.1/weather.php?callback=abc"></script>
 
</body>
</html>

案例十四jsonp封装方法 一直写到会为止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jsonp方法丰富</title>
	</head>
	<body>
	 
<script>
function jsonp(url,option={callback:"callback",jp:"jp"}){
	
	
	return new Promise((resolve,reject)=>{
		var callback = option.callback||'callback'; //传个后端get参数
		var jp = option.jp||"jp"; //传给后端callback的值
		url = url+`&${callback}=${jp}`;//url 添加 &callback=jp;
		// 创建一个函数 函数名和jp 保持一致
		window[jp]=data=>{                       //------------定义一函数叫jp
			resolve(data); //函数执行 返回值
		}
		
		// 动态的创建一个script标签
		var script = document.createElement("script");
		// 指定script的src值
		script.src = url;                    // ----------执行jp方法 执行jp(data)
		// 插入script标签到head里面
		var head = document.querySelector("head");//获取head标签
		head.append(script);//head 插入script标签
		
		
		script.onload=function(){
			head.removeChild(script);//当加载成功移除script标签
		}
		script.onerror = function(e){			
			head.removeChild(script);
			reject(e);//返回错误
		}
	})
}	
var urlB = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82";
var urlA = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1598407894753"
jsonp(urlA)
.then(res=>{
	console.log(res)
	return jsonp(urlB)
})
.then(res=>{
	console.log(res);
})
.catch(err=>console.log(err));
 
// var urlC = "http://127.0.0.1/weather.php?";
// jsonp(urlC)
// .then(res=>{
// 	console.log(res);
// })
 



// 目标

// 传入参数：url 地址   函数名称jp  callback传入后端参数
// 返回：promise对象
// 复习 promise

</script>
</body>
</html>

• 日常学习之Vue的生命周期	• javascript(es6)Map对象基本概念以及在购物车订
• JTopo + Vue 实现自定义拖拽流程图	• 一分钟带你了解最真实的服务器
• wordpress标题title优化代码	• 前端学习--Day04

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享
• STM32查询式按键输入[直接用寄存器]	• Ubuntu系统 USB设备端口绑定
• 2021-04-14 第四次按键输入实验	• Flutter扫码功能完美实现