JavaScript中的Ajax

最新推荐文章于 2023-03-04 22:36:32 发布
最新推荐文章于 2023-03-04 22:36:32 发布
阅读量214 收藏 1
点赞数
分类专栏： HTML JAVA 文章标签： AJAX JQuery-Ajax XMLHttpRequest对象 ajax请求的同步异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiruochujian1/article/details/103152217
版权
JAVA 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏

JavaScript中的Ajax

一.AJAX

是一种异步通信无刷新技术

1.核心对象

XMLHttpRequest对象

1)获取XMLHttpRequest对象

var xhr=new XMLHttpRequest();

属性名说明
onreadystatechange ★监听readystate值的变化
readystate ★数据响应的变化
status ★响应状态码
statusText ★状态码的说明
responseText ★响应的数据

当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。

属性名说明
responseText作为响应主体被返回的文本
responseXML如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档
status响应的HTTP状态
statusTextHTTP状态的说明
(1)readystate 数据响应的变化
值状态说明
0未初始化尚未调用open()方法
1启动已经调用open()方法，但尚未调用send()方法
2发送已经调用send()方法，但尚未接受响应
3接受已经接受到部分响应数据
4 ★完成已经接受到全部响应数据，而且可以使用

0=未初始化
1=已经调用open方法，但未调用send方法
2=调用send方法，但未开始响应
3=响应部分响应
4=完全响应数据，且可以使用

(2)status 响应状态码
HTTP状态码状态字符串说明
200 ★OK服务器成功返回了页面
400Bad Request语法错误导致服务器不识别
401Unauthorized请求需要用户认证
404 ★Not found指定的URL在服务器上找不到
500 ★Internal Server Error服务器遇到意外错误，无法完成请求
503ServiceUnavailable服务器过载或维护导致无法完成请求

200=响应成功
500=服务器异常（报错）
404=未找到资源

2.Ajax的实现流程

1)创建XMLHTTPRequest对象

var xhr=new XMLHttpRequest();

2)打开请求/发送请求

xhr.open(参数1,参数2,参数3)

​ 参数1:请求的方式 (GET|POST)

​ 参数2:请求的路径 (请求地址:如果是GET方请求,参数直接拼在地址栏后面)

​ 参数3:是否异步 (true|false; 默认是true,表示异步)

3)发送请求

xhr.send(参数)

​ 参数: 要传递的数据(参数)

​ 如果是GET请求: send(null);

​ 如果是POST请求: 有参数,则设置参数;无参数则设置为null

4)接收响应

如果响应成功,则接收数据,即status==200

​ xhr.responseText

5)简单实现流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax的实现流程</title>
	</head>
	<body>
	</body>
<script type="text/javascript">
		// 1、创建XMLHttpRequest对象
		var xhr = new  XMLHttpRequest();
		//console.log(xhr);
		// 2、打开请求/准备请求     xhr.open("请求类型GET|POST","请求路径","是否异步true|false")
		xhr.open("GET","js/data.json",false); // 同步请求
		
		// 3、发送请求     xhr.send(参数)
		xhr.send(null);
		
		// 4、接收响应    xhr.responseText
		if (xhr.status == 200) {
			// 如果响应成功，接收数据
			console.log(xhr.responseText);
		}
	</script>
</html>

3.Ajax的请求

1)get的同步和异步

GET请求是最常见的请求类型，最常用于向服务器查询某些信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GET请求</title>
	</head>
	<body>	
		<button onclick="ajaxGet1()">同步请求</button> &nbsp; &nbsp; &nbsp;
		<button onclick="ajaxGet2()">异步请求</button>
	</body>	
	<script type="text/javascript">
		// GET的同步请求
		function ajaxGet1() {
			// 1、创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			// 2、打开请求/准备请求
			xhr.open("GET","js/data.json?uname=zhangsan&upwd=1234",false); // 同步请求
			// 3、发送请求
			xhr.send(null);
			// 4、接收响应
			if(xhr.status == 200) {
				console.log(xhr.responseText);
			}
		}
		// GET的异步请求
		function ajaxGet2() {
			// 1、创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			// 2、打开请求/准备请求
			xhr.open("GET","js/data.json?uname=zhangsan&upwd=1234",true); // 异步请求
			// 3、发送请求
			xhr.send(null);
			// 4、接收响应
			// 监听数据是否完全响应  readystate
			xhr.onreadystatechange = function(){
				// 判断readyState的值是否为4（数据已经完全响应）
				if (xhr.readyState == 4) {
					if(xhr.status == 200) {
						console.log(xhr.responseText);
					} else {
						console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
					}
				}
			}	
		}
		var obj = {
			url:"js/data.json?aa=1", // 请求路径
			async:true, // 是否异步
			data:{	// 请求的参数数据   uname=zhangsan&upwd=1234
				uname:"zhangsan",
				upwd:"1234"
			}
		}
		// 调用ajax的get请求
		ajaxGet(obj);	
		/**
		 * 封装GET请求
		 */
		function ajaxGet(obj) {
			// 默认GET请求
			// 1、创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			// 得到请求的参数     uname=zhangsan&upwd=1234
			var params = formatParams(obj.data);	
			// 判断参数是否为空，不为空则拼接到地址后面
			if (params != null) {
				obj.url += (obj.url).indexOf("?") != -1  ?  "&" + params  : "?" + params;
			}
			// 2、打开请求/准备请求
			xhr.open("GET",obj.url,obj.async); 
			// 3、发送请求
			xhr.send(null);
			// 4、接收响应
			// 判断是否是异步请求
			if (obj.async) { // 异步请求
				// 监听数据是否完全响应  readystate
				xhr.onreadystatechange = function(){
					// 判断readyState的值是否为4（数据已经完全响应）
					if (xhr.readyState == 4) {
						// 4、接收响应
						callback();
					}
				}
			} else { // 同步请求
				// 4、接收响应
				callback();
			}	
			/**
			 * 响应成功处理的结果
			 */
			function callback() {
				if(xhr.status == 200) {
					console.log(xhr.responseText);
				} else {
					console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
				}
			}
		}
		/**
		 * 格式化参数数据，并返回给调用者
		 * @param {Object} data
		 */
		function formatParams(data){
			// 得到格式化好的参数数据
			var params = null;
			
			if (data != null  && data.length > 0) {
				// 定义数组，接收每个参数键值对
				var arr = [];
				// 遍历对象，得到对象中的键和值
				for (var k in data) {
					var name = k;
					var value = data[k];
					// 拼接键和值
					var param = name+"="+value;
					// 将键值对设置到数组中
					arr.push(param);
				}
				// 将数组转换成以指定符号分隔的字符串
				params = arr.join("&");
				console.log(params);
			}
			return params
		}
	</script>
</html>

2)post的同步和异步

POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POST请求</title>
</head>
<body>	 
	 <button onclick="ajaxPost1()">同步请求</button> &nbsp; &nbsp; &nbsp;
	 <button onclick="ajaxPost2()">异步请求</button>	 
</body>
<script type="text/javascript">
	/**
		Ajax Post请求  同步请求
	 */
	function ajaxPost1() {
		// 1、创建XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		// 2、打开请求/准备请求
		xhr.open("POST","js/data.json",false); // 同步请求 
		// 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// 3、发送请求
		xhr.send("uname=zhangsan&upwd=1234");
		// 4、接收响应
		if(xhr.status == 200) {
			console.log(xhr.responseText);
		}
	}
	/**
		Ajax Post请求  异步请求
	 */
	function ajaxPost2() {
		// 1、创建XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		// 2、打开请求/准备请求
		xhr.open("POST","js/data.json",true); // 异步请求 
		// 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// 3、发送请求
		xhr.send("uname=zhangsan&upwd=1234");
		// 4、接收响应
		// 监听数据是否完全响应  readystate
		xhr.onreadystatechange = function(){
			// 判断readyState的值是否为4（数据已经完全响应）
			if (xhr.readyState == 4) {
				if(xhr.status == 200) {
					console.log(xhr.responseText);
				} else {
					console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
				}
			}
		}
	}
	var obj = {
			url:"js/data.json", // 请求路径
			async:true, // 是否异步
			data:{	// 请求的参数数据   uname=zhangsan&upwd=1234
				uname:"zhangsan",
				upwd:"1234"
			}
		}
	// 调用ajax的post方法
	ajaxPost(obj);
	/*
		封装Ajax的Post请求
	*/
	function ajaxPost(obj) {
		// 默认POST请求
		// 1、创建XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		// 2、打开请求/准备请求
		xhr.open("POST",obj.url,obj.async); 
		// 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// 得到格式化后的参数
		var params = formatParams(obj.data);
		// 3、发送请求
		// 判断是否存在参数
		if (params != null) {
			xhr.send(params);
		} else {
			xhr.send(null);
		}
		// 判断是否是异步请求
		if (obj.async) { // 异步请求
			// 监听数据是否完全响应  readystate
			xhr.onreadystatechange = function(){
				// 判断readyState的值是否为4（数据已经完全响应）
				if (xhr.readyState == 4) {
					// 4、接收响应
					callback();
				}
			}
		} else { // 同步请求
			// 4、接收响应
			callback();
		}
		/**
		 * 响应成功处理的结果
		 */
		function callback() {
			if(xhr.status == 200) {
				console.log(xhr.responseText);
			} else {
				console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
			}
		}
		
	}
	/**
	 * 格式化参数数据，并返回给调用者
	 	{	   
			uname:"zhangsan",
			upwd:"1234"
		}	
		uname=zhangsan&upwd=1234
	 * @param {Object} data
	 */
	function formatParams(data){
		// 得到格式化好的参数数据
		var params = null;
		if (data != null  && data.length > 0) {
			// 定义数组，接收每个参数键值对
			var arr = [];
			// 遍历对象，得到对象中的键和值
			for (var k in data) {
				var name = k;
				var value = data[k];
				// 拼接键和值
				var param = name+"="+value;
				// 将键值对设置到数组中
				arr.push(param);
			}
			// 将数组转换成以指定符号分隔的字符串
			params = arr.join("&");
			console.log(params);
		}
		return params
	}
</script>
</html>

3)Ajax请求功能的封装

Ajax实现流程
1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备请求/打开请求
xhr.open(参数1,参数2,参数3)
参数1：请求的方式 （GET|POST）
参数2：请求的路径 （请求地址；如果是GET请求，参数直接拼接在地址栏后面）
参数3：是否异步 （true|false。默认是true，表示异步）
3、发送请求
xhr.send(参数);
如果是GET请求，则send(null); 参数会直接设置在请求的地址后面；
如果是POST
向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
如果有参数，则send(参数)；如果没有参数，则send(null)
4、接收响应
如果是同步请求
判断是否响应成功 status200
如果是，则获取响应数据 xhr.responseText
如果是异步请求
通过onreadystatechange事件监听readyState的值变化，当数据完全响应成功时，readyState的值为4
判断readyState的值是否为4
如果是，判断是否响应成功 status200
如果是，则获取响应数据 xhr.responseText

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>封装Ajax</title>
</head>
<body> 
</body>
<script type="text/javascript">
	var obj = {
		url:"js/data.json",
		type:"GET", // 请求类型 GET|POST
		async:true, // 是否异步请求  true|false
		data:{
			uname:"zhangsan",
			upwd:"123"
		},
		success:function(result){
			alert(result);
		}
	};
	ajax(obj);
	var obj2 = {
			url:"js/data.json",
			type:"GET", // 请求类型 GET|POST
			async:false, // 是否异步请求  true|false
			data:{
				uname:"zhangsan",
				upwd:"123"
			},
			success:function(result){
				console.log(result);
			}
		};	
	ajax(obj2);
	ajax({
		url:"js/data.json",
		type:"GET", // 请求类型 GET|POST
		async:false, // 是否异步请求  true|false
		data:{
			uname:"zhangsan",
			upwd:"123"
		},
		success:function(result){
			console.log(result);
		}
	});
	/**
		封装Ajax
	 */
	function ajax(obj) {
		// 1、创建XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		// 将对象格式的参数转换成键值对的字符串格式   
		var params = formatParams(obj.data);
		// 判断是否是GET请求
		if ((obj.type).toUpperCase() == "GET") {
			// 将参数拼接到地址后面
			obj.url += (obj.url).indexOf("?") != -1  ? "&"+params : "?"+params;
		}
		// 2、准备请求/打开请求
		xhr.open(obj.type,obj.url,obj.async);
		// 3、发送请求  xhr.send(参数);
		if ((obj.type).toUpperCase() == "GET") {
			// GET请求，参数设置为null
			xhr.send(null);
		} else {
			// 如果是POST请求
			// 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			// 如果有参数，则send(参数)；如果没有参数，则send(null)
			xhr.send(params);
		}
		// 4、接收响应
		if (obj.async) { // 如果是异步请求
			// 如果是异步请求
			// 	通过onreadystatechange事件监听readyState的值变化，当数据完全响应成功时，readyState的值为4
			xhr.onreadystatechange = function() {
				//	判断readyState的值是否为4
				if (xhr.readyState == 4) {
					// 判断是否响应成功 status==200;如果是，则获取响应数据  xhr.responseText
					callback();
				}
			}
		} else { // 如果是同步请求
			// 判断是否响应成功 status==200;如果是，则获取响应数据  xhr.responseText
			callback();
		}
		//回调函数
		function callback() {
			// 判断是否响应成功 status==200;如果是，则获取响应数据  xhr.responseText
			if (xhr.status == 200) {
				// console.log(xhr.responseText);
				obj.success(xhr.responseText);
			}
		}
	}
	/**
	 * 格式化参数数据，并返回给调用者
	 * @param {Object} data
	 */
	function formatParams(data){
		// 得到格式化好的参数数据
		var params = null;
		if (data != null  && data.length > 0) {
			// 定义数组，接收每个参数键值对
			var arr = [];
			// 遍历对象，得到对象中的键和值
			for (var k in data) {
				// 拼接键和值
				var param = k + "=" + data[k];
				// 将键值对设置到数组中
				arr.push(param);
			}
			// 将数组转换成以指定符号分隔的字符串
			params = arr.join("&");
		}
		return params;
	}
</script>
</html>

4.JQuery-Ajax

jquery调用ajax方法

1) $.ajax()

格式：$.ajax({});
参数：
type：请求方式GET/POST ★
url：请求地址url ★
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型 ★
contentType：设置请求头
success：请求成功时调用此函数 ★
error：请求失败时调用此函数

//主代码
$.ajax({
	type:"get",		//请求类型 GET|POST
	url:"data.txt",		//请求地址
	data:{	//请求传递给后台的参数数据
	
	},
	dataType:"json",	//预期服务器返回的数据类型是JSON格式,浏览器接收后会自动封装为JSON对象
	success:function(result){	//回调函数:用来接收ajax请求后返回的结果
		console.log(result);
		//将JSON格式的字符串转换为JSON对象
		//var json = JSON.parse(result);console.log(json);
		var ul=$("<ul></ul>");
		//遍历
		for(var i=0;i<result.length;i++){
			var li = "<li>"+ result[i].uname +"</li>";
			//将li追加到ul中
			ul.append(li);
		}
		//将ul追加到body中
		$("body").append(ul);
	}
});

2)$.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax()

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax


//有请求地址,无参数,无返回值
$.get("data.json");

//有请求地址,有参数,无返回值
$.get(uname:"zhangsan",upwd:"123");

//有请求地址,无参数,有返回值
$.get("data.json",function(result){
	console.log(result);
});

//有请求地址有参数,有返回值
$.get("data,json",{uname:"zhangsan",upwd:"123"},function(result){
	console.log(result);
})

3)$.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax()

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax


//有请求地址,无参数,无返回值
$.post("data.json");

//有请求地址,有参数,无返回值
$.post(uname:"zhangsan",upwd:"123");

//有请求地址,无参数,有返回值
$.post("data.json",function(result){
	console.log(result);
});

//有请求地址有参数,有返回值
$.post("data,json",{uname:"zhangsan",upwd:"123"},function(result){
	console.log(result);
})

4)$.getJSON()

表示请求返回的数据类型是JSON格式的ajax请求

//有请求地址,无参数,无返回值
$.getJSON("data.json");

//有请求地址,有参数,无返回值
$.getJSON(uname:"zhangsan",upwd:"123");

//有请求地址,无参数,有返回值
$.getJSON("data.json",function(result){
	console.log(result);
});

//有请求地址有参数,有返回值
$.getJSON("data,json",{uname:"zhangsan",upwd:"123"},function(result){
	console.log(result);
})

5) jsonp

​ 远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用普通的ajax方法是获取不到数据的，那么就可以使用jsonp方式发送请求。

添加属性：
jsonp:’callback’
dataType:’jsonp’

$.ajax({
		type:"get", 
		url:"http://iservice.itshsxt.com/restaurant/find",
		dataType:"jsonp", // 允许跨域请求   （服务器也需要设置允许请求跨域）
		success:function(result){
			console.log(result);
		}
	});
zhiruochujian1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中的ajax
mikkfe的博客
03-14 201
一、ajax的准备 程序中的同步：不同时操作，即没有一起执行，一条一条从上往下依次执行 alert("1"); alert("2"); alert("3"); alert("4"); 程序中的异步：同时操作，即一起执行的代码，不受上面代码的影响 js中有特定的场景才会产生异步程序，例如事件和计时器，其大概过程是：代码从上向下依次执行，绑定的事件和计时器本身执行了，...
javascript中ajax入门篇
05-31
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。 这两个 JavaScript 功能 是： * 在不重新读取页面的情况下对伺服器送出要求（request） * 解析、使用 XML 文件 第一步 – 怎么发出 XMLHttpRequest 为了用 JavaScript 对伺服器发送 HTTP 要求，你必须先以相关的类别（class）制出实体（instance）。Internet Explorer 首先以 ActiveX 物件方式提供 XMLHTTP 类别，而 Mozilla、Safari 及其他浏览器则随后以 XMLHttpRequest 类别支援此 ActiveX 物件中的类别及属性。 因此，如果想跨浏览器，那么可以这么写： 代码如下 复制代码 if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); } (由于这段程式仅供说明，所以是采最简方式写出。本文第三步中有另一种我们比较常用的写法。) 有些版本的 Mozilla 浏览器在伺服器送回的资料未含 XML mime-type 档头（header）时会出错。为了避免这个问题，你可以用下列方法覆写伺服器传回的档头，以免传回的不是 text/xml。
javascript中的ajax
ltnsee的博客
08-15 188
首先说一下Ajax是可以从服务器上读取数据，并且返回给我们，不刷新页面就可以读取数据或者发送数据。 (1)本地服务器url:localhost/aaa.html || 127.0.1/aaa.html (2)async 异步（async：true）：多个请求同时进行； 同步（async：false） ：多个请求一个一个的进行，如果有一个停止或异常就会引起其他请求从而会导致阻塞
Javascript中的ajax
Knight7890的博客
06-02 626
我想大家应该都知道，弹幕这个概念吧，举个最简单的例子，比如lol直播，上面会弹出好多的用户发表的观点，这就是ajax的异步加载，其目的在于“不刷新、不跳转”页面的情况下通过服务器请求异步完成。 这样可以降低服务器的负载，减少用户等待时间，加快响应速度。 而ajax的核心了，xmlhttpRequest,简称xhr(小黄人)，这个东西名字一大堆，到底是个什么鬼呢？ 其实很好理解，咋们把它拆开，xml指的是可扩展标记语言，和json类似，json是一种文件的格式，这个要是你不知道，赶紧去百度。
javascript中AJAX用法实例分析
10-24
主要介绍了javascript中AJAX用法,实例分析了针对不同浏览器的Ajax使用技巧,非常具有实用价值,需要的朋友可以参考下
JavaScript与Ajax开发课程大作业
最新发布
05-29
JavaScript和Ajax是Web开发中的重要技术，用于创建交互性强、响应快速的网页应用。这个"JavaScript与Ajax开发课程大作业"可能涵盖了从基础概念到高级技巧的全方位学习内容，旨在帮助学生深入理解和掌握这两种技术。 ...
原生JavaScript实现Ajax的方法
10-22
主要介绍了原生JavaScript实现Ajax的几种方法，感兴趣的小伙伴们可以参考一下
javascript ajax功能函数
10-29
javascript ajax功能函数，没用过的朋友看看代码，应该会有点收获。
ajax在JavaScript中
xiaozhizhi__的博客
07-04 254
17 JavaScript中的操作： 在JavaScript中加入下面范例便可以发送请求到一般处理程序： $.ajax({ 　　type: “post”, 　　url: “TestMatrix1.aspx/SayHello”,　　　　//请求链接格式：页面文件/请求的操作(页面的带有WebMethod前缀的静态函数) 　　data: JSON.stringify　　　　　　　　　 //传递的参...
JavaScript-Ajax基础讲解
OuYyds的博客
04-16 1946
ajax概述： ajax全称：异步的JavaScript和xml，他是用于发送http请求（支持异步请求） ajax的特点： 1.支持异步请求 2.实现局部刷新 3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录） ajax运用： 前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据 1.创建一个请求对象 request 请求 response 响应 let xhr = new
javascript 中 ajax的几种请求方式
zhenqian52的博客
11-07 1050
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 多种实现方式： $.ajax  $.post  $.get 等等 首先看最底层的$.ajax(url,data,function( ){ });
Ajax----学习（1）----js中的ajax
lsh15846393847的博客
12-18 207
Ajax 作用：一种不用刷新整个页面便可以于服务器通讯的方法。 Ajax工作原理：                                           Ajax异步数据的读取：XMLHttpRequest对象。     Ajax数据格式：1.XML   2.JSON  3.HTML                3.传递HTML格式数据               ...
javaScript中ajax入门
程宇寒
08-19 718
ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做！ ajax中，最关键的一句话就是var xhr = new XMLHttpRequest();
JavaScript、Ajax与jQuery的关系
jediael_lu的专栏
07-31 3万+
简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便 详细情况： Actually only one of them is a programming lan
JavaScript之Ajax（一篇入门Ajax就够了）
热门推荐
weixin_50602266的博客
12-20 8万+
Ajax入门一篇就够
javascript的ajax
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
03-04 3094
（域名）:443（端口号）/course/list（路径）协议、域名、端口号，任何一个不一样，就是不同域与路径无关，路径一不一样无所谓不同域同域。
【JavaScript】Ajax
南栀的博客
12-17 3624
Ajax
JavaScript与Ajax入门指南 - 2010版
在《JavaScript®&AJAX For Dummies®》这本书中，作者A.Harris深入浅出地介绍了JavaScript和Ajax这两个关键的Web开发技术。JavaScript是一种广泛应用于网页和应用程序的编程语言，它允许网页动态更新内容而无需刷新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值