了解ajax
Ajax(Asynchronous Javascript AndXML),是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式
理解http和https的区别
1.、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。 //
2. http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
3. http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
4. http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全
使用js的ajax
1.创建XMLHttpRequest()对象
let http = new XMLHttpRequest();
2.请求创建的对象,选择请求方式
请求方式
- get方式:偏向获取数据;
*
- post方式: 偏向向后端提交数据
*
- put方式:偏向更新(全部更新)
- delete方式:偏向删除信息;
公开的路径: http://jsonplaceholder.typicode.com/posts
决定请求方式
http.open(“请求方式”,“url”);
3.发送请求
http.send();
4.设置监听事件readystatechange
作用:监听发送请求事件
http.onreadystatechange = function(){
if(http.readyState==4 && http.status==201){
console.log(JSON.parse(http.responseTextresponseText));
}
}
readyState值
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4:请求已完成,且响应已就绪
responseText:.响应(获取接口返回值)http.responseText()获得字符串形式的响应数据。
get方式
let http = new XMLHttpRequest();
http.open("get","http://jsonplaceholder.typicode.com/posts");
http.send();
http.onreadystatechange=function(){
if(http.readyState==4 && http.status==201){
console.log(JSON.parse(http.responseTextresponseText));
}
注意: get方法的传值就是在路径后面加上?
在加上要传的值
作用:筛选从接口获取的数据
http.open(“get”,“http://jsonplaceholder.typicode.com/posts?id=10”);
post方式
let http = new XMLHttpRequest();
http.open("post","http://jsonplaceholder.typicode.com/posts");
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.send(JSON.stringify("userId=10&&title=hello&&body=你好"));
http.onreadystatechange=function(){
if(http.readyState==4 && http.status==201){
console.log(JSON.parse(http.responseTextresponseText));
}
}
通过上面的例子可以看见post方式多了一个setRequestHeader
方法
setRequestHeader方法总共有两种数据上传方式
1.表单格式
http.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)
http.send(JSON.stringify(`userId=10&title=hello&body=你好`));
2.JSON格式
http.setRequestHeader(“Content-Type”,“application/json”)
http.send(JSON.stringify({ “userId”:10, “title”:“hello”, “body”:“你好”});
jq的ajax
jq就比js方便多了
$.ajax()默认行为是get
var base = "http://jsonplaceholder.typicode.com";
$.ajax({
url: base+"/posts",
data: {
id:20
},
success: function(user){
console.log(user);
},
})
jq的ajax是以对象的方式去执行,
url
:发送请求的地址data:
需要上传的数据success函数
:成功后执行的函数
但是只用get方式有太局限了,有就有了针对各个请求方式的方法
get方法
$.get("http://jsonplaceholder.typicode.com/posts",{
id:5
},function(user){
console.log(user);
})
$.get()作为一个方法肯定要传参的
第一个参数就是url
也就是请求地址
第二个参数是一个对象,里面的值就是上传的数据
第三个参数就是执行完后调用的函数
$.post("http://jsonplaceholder.typicode.com/posts",{
"userId":10,
"title":"hello",
"body":"你好"
},function(user){
console.log(user);
})
$.post()和get方法唯一的区别就在第二个参数
get里面的上传是用于筛选从接口获取的数据,所以键名不用加引号
post里面的上传是将里面的数据上传到一个指定存储里面,所以键名键值都要加引号