ajax基础使用

了解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里面的上传是将里面的数据上传到一个指定存储里面,所以键名键值都要加引号

代码007普通

打赏 收藏 海报 链接