JavaScript的学习——AJAX

已于 2022-02-25 13:24:20 修改
阅读量546 收藏 1
点赞数
文章标签： ajax javascript 学习
于 2020-12-26 15:53:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43668101/article/details/111462481
版权

文章目录

AJAX

https://www.bilibili.com/video/BV1WC4y1b78y

AJAX简介

AJAX是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，是一种将现有标准组合在一起使用的新方式。

特点
优点：
1、无需刷新页面与服务器进行通信
2、可以根据用户事件来更新部分页面内容

缺点：
1、没浏览历史，不能回退
2、存在跨域问题
3、SEO不友好

HTTP

请求报文

//行		GET		/s?ie=utf-8		HTTP/1.1
		(请求类型）	（URL）		（HTTP协议版本）
//头		Host: xxx.com
			Cookie: name=xxx
			Content-type: application/x-www-form-urlencoded
			User-Agent: chrome 83
//空行
//体		username=admin&password=admin

响应报文

//行		HTTP/1.1			200				OK
			(协议版本）		（响应状态码）	（响应状态字符串）
//头		Content-Type: text/html;charset=utf-8
			Content-length: 2048
			Content-encoding: gzip
//空行
//体		<html>
				<head>
				</head>
				<body>
					<h1>十五春会</h1>
				</body>
			</html>
//响应体响应HTML内容
//请求报文接到结果提取响应体内容并解析，在页面渲染和呈现

在浏览器中查看

在这里插入图片描述
请求头内容：
在这里插入图片描述
点击view source出现请求行
在这里插入图片描述
响应头内容：
在这里插入图片描述
点击view source出现响应头
在这里插入图片描述
response中响应体内容，Preview中对响应体内容进行演示
在这里插入图片描述

上面是get请求，那么如果是post请求呢？
在这里插入图片描述

安装NODEJS及express框架

介绍参考：https://blog.csdn.net/weixin_42881768/article/details/105542994
express安装代码：

npm init --yes

npm i express

案例

GET请求

需求：点击按钮后向服务端发起请求，把服务端返回的响应体结果在div中做一个呈现。
在这里插入图片描述

1GET.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AJAX GET请求</title>
	<style>
		#result{
			width: 200px;
			height: 100px;
			border: solid 1px #F63707;
		}
	</style>
</head>
<body>
	<button>点击发送请求</button>
	<div id='result'></div>
</body>
</html>

server.js：

// 1、引入express
const express = require('express');

// 2、创建应用对象
const app = express();

// 3、创建路由规则
//   request是对请求报文的封装
//   response是对响应报文的封装
//  当发送请求时url路径是请求行的第二段内容，路径为/server时，执行回调函数中的代码，由response做出响应
app.get('/server',(request, response)=>{
	//设置响应头，设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	//设置响应体
	response.send('HELLO AJAX');
});

// 4、监听端口启动服务
app.listen(8000, ()=>{
	console.log('服务已经启动，8080端口监听中...');
})

写好后在cmd中运行server.js
在这里插入图片描述
在这里插入图片描述
然后打开网页http://127.0.0.1:8000/server
在这里插入图片描述
接下来在1GET.html中添加如下代码：

<script>
	const btn = document.getElementsByTagName('button')[0];
	btn.onclick = function(){
		//1、创建对象
		const xhr = new XMLHttpRequest();
		//2、初始化，设置请求方法和url
		xhr.open('GET','http://127.0.0.1:8000/server');
		//3、发送
		xhr.send();
		xhr.onreadystatechange = function(){
			//判断（服务端返回了所有的结果）
			if(xhr.readyState === 4){
				//判断响应状态码 200 404 403 401 500
				if(xhr.status === 200){
					//处理结果 行 头 空行 体
					//测试返回响应结果
					/*
					console.log(xhr.status);//状态码
					console.log(xhr.statusText);//状态字符串
					console.log(xhr.getAllResponseHeaders());//所有响应头
					console.log(xhr.response);//响应体
					*/
					//设置result的文本
					result.innerHTML = xhr.response;
				}
			}
		}
	}
</script>

那么基本需求就完成了
在这里插入图片描述

设置请求参数

用?分割加参数的名字与值

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');

在这里插入图片描述

POST请求

需求：当鼠标移到div上时向服务端发送POST请求，服务端返回结果后把响应体结果在div中呈现出来。
在这里插入图片描述

2POST.html

<div id='result'></div>
<script>
	const result = document.getElementById('result');
	//绑定事件
	result.addEventListener('mouseover', function(){
		//1、创建对象
		const xhr = new XMLHttpRequest();
		//2、初始化，设置请求类型和url
		xhr.open('POST','http://127.0.0.1:8000/server');
		//3、发送
		xhr.send();
		xhr.onreadystatechange = function(){
			//判断
			if(xhr.readyState === 4){
				if(xhr.status === 200){
					//设置result的文本
					result.innerHTML = xhr.response;
				}
			}
		}
	});
</script>

在server.js中添加如下代码：

app.post('/server',(request, response)=>{
	//设置响应头，设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	//设置响应体
	response.send('HELLO AJAX POST');
});

然后大功告成：
在这里插入图片描述

设置参数

可以任意设置服务端能处理的任意类型任意格式数据。

xhr.send('a=100&b=200&c=300');

在这里插入图片描述

设置请求头

设置预定义的请求头信息

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

设置自定义的请求头信息

xhr.setRequestHeader('name','Evelyn');

那么此时会出现错误，浏览器会有安全机制
在这里插入图片描述
此时需要修改server.js

//all意为可以设置任意类型的请求
app.all('/server',(request, response)=>{
	//设置响应头，设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	//接受所有类型头信息
	//此时服务器会再发出options请求做权限校验，因此要将前面改为all
	response.setHeader('Access-Control-Allow-Headers','*');
	//设置响应体
	response.send('HELLO AJAX POST');
});

然后就大功告成了：
在这里插入图片描述

服务端响应JSON数据

在实际工作中，我们向服务端发送请求，服务端返回的结果大多数都是JSON格式数据，那我们如何处理？
做一个案例演示：键盘按下任意键，向服务端发送请求，服务端返回结果，我们在div中做一个呈现。
3JSON.html

<div id='result'></div>
<script>
	const result = document.getElementById('result');
	//绑定键盘按下事件
	window.onkeydown = function(){
		//发送请求
		const xhr = new XMLHttpRequest();
		//自动转换——设置响应体数据的类型
		xhr.responseType = 'json';
		//初始化
		xhr.open('GET','http://127.0.0.1:8000/json-server');
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4){
				if(xhr.status === 200){
					//1、手动对数据转换
					//let data = JSON.parse(xhr.response);
					//console.log(data);
					//reslut.innerHTML = data.name;、
					//2、自动转换
					console.log(xhr.response);
					result.innerHTML = xhr.response.name;
				}
			}
		}
	}
</script>

在server.js中添加如下代码：

app.get('/json-server',(request, response)=>{
	//设置响应头，设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	//响应一个数据
	const data = {
		name: 'Evelyn'
	}
	//对对象进行字符串转换
	let str = JSON.stringify(data);
	//设置响应体
	response.send(str);
});

在这里插入图片描述

nodemon安装

上面每一次修改server.js后都需要重新在cmd中启动服务，十分麻烦。所以我们可以安装nodemon自动重启工具。

npm install -g nodemon

运行server.js

nodemon server.js

IE缓存问题

什么是IE缓存问题？
IE浏览器会对AJAX的请求结果做一个缓存，导致下一次再发送请求时，它会走本地的缓存而不是服务器返回的最新数据。
在时效性比较强的场景，AJAX的缓存会影响我们的结果，它不能够正常显示。
展示问题：

在这里插入图片描述
添加时间戳使每次点击都在发送不同的内容，这样的话ie就不会走缓存了，会向服务器发送请求返回结果。

xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());

在实际工作中这个不需要我们自己去加，工具会把这些都做好，但是要了解。

请求超时与网络异常

项目上线后运行过程中一定会出现请求超时与网络异常的情况，我们不能保证服务端永远能及时快速的响应，这个时候我们需要对AJAX做超时设置，给用户提醒，这样产品体验更好。

请求超时演示

我们在server.js中设置一个3s的延时响应：

app.get('/delay',(request, response)=>{
	response.setHeader('Access-Control-Allow-Origin', '*');
	//延时响应
	setTimeout(()=>{
	response.send('延时响应');
	},3000);
});

在html中添加如下代码：

...//创建
//超时设置 2s
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
	alert('请求超时，请稍后再试');
}
...//初始化及发送等

在这里插入图片描述

网络异常演示

//网络异常回调
xhr.onerror = function(){
	alert('你的网络似乎出了一些问题！');
}

在这里插入图片描述

取消请求

在请求过程中，结果还没回来时，通过代码把请求手动取消。

let xhr = null;
btns[0].onclick = function(){
	xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://127.0.0.1:8000/delay');
	xhr.send();
}
btns[1].onclick = function(){
	xhr.abort();//取消请求
}

在这里插入图片描述

请求重复发送

同样在上一部分代码中，我们可以发现，每点击一下就会创建一个请求。如果用户疯狂点击，服务器压力就会非常大，他会接收到非常多的相同请求，那么服务器就要频繁去处理。

那么如何解决？

点击一下按钮时查看之前是否有相同请求，如果有，那么把之前的取消掉然后发送一个新请求。
这样一来，我们向服务器发送的请求始终只有一个，减轻了服务器压力，提高了效率，提高了性能。

const btns = document.querySelectorAll('button');
//标识变量
let isSending = false;//是否正在发送AJAX请求
btns[0].onclick = function(){
	//判断标识变量
	if(isSending) xhr.abort();//如果正在发送，则取消该请求，创建一个新请求
	xhr = new XMLHttpRequest();
	//修改标识变量
	isSending = true;
	xhr.open('GET', 'http://127.0.0.1:8000/delay');
	xhr.send();
	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4){
			//修改标识变量
			isSending = false;
		}
	}
}

在这里插入图片描述

jQuery中的AJAX

在jQuery中如何发送AJAX呢？
在server.js中添加如下代码：

//jQuery
app.all('/jquery-server',(request, response)=>{
	response.setHeader('Access-Control-Allow-Origin', '*');
	const data = {name: 'Evelyn'};
	setTimeout(()=>{
		response.send(JSON.stringify(data));
	},3000);
	//response.send('HELLO jQuery AJAX');
});

以下介绍三个方法：get、post、通用方法ajax。

<div class='container'>
	<h2 class='header'>jQuery发送AJAX请求</h2>
	<button class='btn-get'>GET</button>
	<button class='btn-post'>POST</button>
	<button class='btn-ajax'>通用性方法ajax</button>
</div>
<script>
	$('button').eq(0).click(function(){
		//get请求：$.get(url,[data],[callback],[type])
		//data为请求携带参数，callback为成功时回调函数，type为返回内容格式
		$.get('http://127.0.0.1:8000/jQuery-server',{a:100, b:200}, function(data){
			console.log(data);
		},'json');//有设置json，输出结果是对象
	})
	$('button').eq(1).click(function(){
		//post请求：$.post(url,[data],[callback],[type])
		$.post('http://127.0.0.1:8000/jQuery-server',{a:100, b:200}, function(data){
			console.log(data);
		});//没有设置json，输出结果是字符串
	})
	$('button').eq(2).click(function(){
		$.ajax({
			//url
			url:'http://127.0.0.1:8000/jQuery-server',
			//参数
			data: {a:100,b:200},
			//请求类型
			type: 'GET',
			//响应体结果
			dataTyoe: 'json',
			//成功的回调
			success: function(data){
				console.log(data);
			},
			//超时时间
			timeout: 2000,
			//失败的回调
			error: function(){
				console.log('出错啦！');
			}
		})
	})
</script>

在这里插入图片描述

Axios发送AJAX请求

Axios网址：https://github.com/axios/axios
首先先设置一下server.js：

app.all('/axios-server',(request, response)=>{
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers','*');
	const data = {name: 'Evelyn'};
	response.send(JSON.stringify(data));
	//response.send('HELLO axios AJAX');
});

GET请求

<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
	const btns = document.querySelectorAll('button');
	//配置baseURL
	axios.defaults.baseURL = 'http://127.0.0.1:8000';
	btns[0].onclick = function(){
		//GET get(url[,config])
		axios.get('/axios-server',{
			//url参数
			params: {
				id: 100,
				vip: 7
			},
			//请求头信息
			headers: {
				name:'Evelyn',
				age: 20
			}
		}).then(value => {
			console.log(value);
		});
	}
</script>

在这里插入图片描述
在这里插入图片描述

POST请求

btns[1].onclick = function(){
	//POST post(url,data[,config])
	axios.post('/axios-server',{
		username: 'admin',
		password: 'admin'
	},{
		//url
		params: {
			id: 200,
			vip: 8
		},
		//请求头信息
		headers: {
		height: 160,
		weight: 90
		}
	})
}

在这里插入图片描述

AJAX

btns[2].onclick = function(){
	axios({
		//请求方法
		method: 'POST',
		//url
		url: '/axios-server',
		//url参数
		params: {
			vip: 10,
			level: 20
		},
		//头信息
		headers: {
			a:100,
			b:200
		},
		//请求体参数
		data: {
			username: 'admin',
			password: 'admin'
		}
	}).then(response=>{
		console.log(response);
		console.log(response.status);
		console.log(response.statusText);
		console.log(response.headers);
		console.log(response.data);
	})
}

在这里插入图片描述
在这里插入图片描述

fetch()函数发送ajax请求

fetch()函数属于全局对象，可以直接调用。它返回一个promise，这个promise会在请求响应后被resolve，并传回Response对象。

Promise<Response> fetch(input[,init]);

fetch详解：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

btn.onclick = function(){
	fecth('://127.0.0.1:8000/fetch-server',{
		method: 'POST',
		//请求头
		headers: {
			name: 'Evelyn'
		},
		//请求体
		body: 'username=admin&password=admin'
	}).then(response=>{
		//return response.text();
		return response.json();
	}).then(response=>{
		console.log(response);
	})
}

在这里插入图片描述
在实际工作中fetch用的较少，但是要做了解。

跨域

同源策略是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

AJAX默认遵循同源策略。

演示：

//server2.js
const express = require('express');
const app = express();
app.get('/home',(request, response)=>{
	//响应一个页面
	response.sendFile(__dirname + '/11SameSource.html');
});
app.get('/data', (request, response)=>{
	response.send('用户数据');
})
app.listen(9000,()=>{
	console.log('端口9000服务已启动...');
});

//html
const xhr = new XMLHttpRequest();
//这里因为是满足同源策略，所以url可以简写
xhr.open('GET', '/data');
xhr.send();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
		if(xhr.status === 200){
			console.log(xhr.response);
		}
	}
}

在这里插入图片描述

JSONP

JSONP是一个非官方的跨域解决方案，只支持get请求。
在网页中有一些标签天生具有跨域能力，如：img、link、iframe、script。
JSONP就是利用script标签的跨域能力来发送请求。

例子：我们在写jQuery中的AJAX时需要引入jquery的远程资源：

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

那我们运行页面的路径是：

file:///D:/.../AJAX/8jQueryAJAX.html

不管是协议、域名还是端口都不一样，但是没有影响代码正常执行，我们能正常使用jQuery，所以说script本身就具备跨越特性。

示例：

用户名：<input type="text" id="username">
<p></p>
<script>
	//获取input元素
	const input = document.querySelector('input');
	const p = document.querySelector('p');
	//声明handle函数
	function handle(data){
		input.style.border = "solid 1px #foo";
		//修改p标签的提示文本
		p.innerHTML = data.msg;
	}
	//绑定事件
	input.onblur = function(){
		let username = this.value;
		//1、创建script标签
		const script = document.createElement('script');
		//2、设置标签的src属性
		script.src = 'http://127.0.0.1:8000/check-username';
		//3、将script插入到文档中
		document.body.appendChild(script);
	}
</script>

//server.js
app.all('/check-username',(request, response)=>{
	const data = {
		exist: 1,
		msg: '用户名已存在'
	};
	var str = JSON.stringify(data);
	response.end(`handle(${str})`);
	//是模板字符串，等同于response.end('handle('+str+')');
});

在这里插入图片描述

用jQuery发送JSONP

$('button').eq(0).click(function(){
	$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
		$('#result').html(`
			名称： ${data.name}<br>
			校区： ${data.city}
			`)
	});
});

//server.js
app.all('/jquery-jsonp-server',(request, response)=>{
	const data = {
		name: 'Evelyn',
		city: ['上海','杭州']
	};
	var str = JSON.stringify(data);
	let cb = request.query.callback;
	response.end(`${cb}(${str})`);
});

在这里插入图片描述

CORS

CORS是官方的跨域解决方案。
CORS是通过设置一个响应头来告诉浏览器该请求允许跨域，浏览器收到该响应后就会对响应放行。

CORS详解：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS的使用

这个前面都有写到了：

//设置响应头
//指定了允许访问该资源的外域URI
response.setHeader('Access-Control-Allow-Origin', '*');
//用于预检请求的响应。指明了请求中允许携带的首部字段。
response.setHeader('Access-Control-Allow-Headers', '*' );
//用于预检请求的响应。指明请求所允许使用的HTTP方法。
response.setHeader('Access-Control-Allow-Method', '*');
十五春会
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript——Ajax
03-18
NULL 博文链接：https://truevoid.iteye.com/blog/686399
JavaScript之Ajax（一篇入门Ajax就够了）
热门推荐
weixin_50602266的博客
12-20 6万+
Ajax入门一篇就够
JavaScript中的Ajax
weixin_43466575的博客
04-10 6068
（1）什么是AjaxAjax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新。（2）Ajax工作流程。
JS的AJAX
weixin_43297321的博客
06-28 1347
Ajax 异步通信技术，是Asynchronous JavaScript+XML的简写，这种技术允许向服务器请求额外的数据而无需卸载（刷新）页面。 网页发展缓慢 网页传播消息、允许进行搜索查询 搜索（SEO） 媒介搜索 静态页面能被搜索到 如果页面是需要的时候动态写入，那就无法搜索到该页面 SEO的优化，得写成静态页面 造成早期网页不能向其他语言一样直接给服务端发送消息，服务器返回消息，所以早期的通信都是前后端不分离的情况（跳转页面），这种方式能够最大限度的允许我们通过SEO搜索页面 但是有缺陷（无
JS中的ajax
不想写代码的一天
06-17 1万+
AJAX 传统的web交换缺点： 1.流量损失 2.浪费时间和带宽 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。 特点： 局部刷新； 最大的特点：局部刷新 ajax的优点： 1.局部刷新； 2,。优化了浏览器与服务器之间的传输，减少了不必要...
【JavaScript】Ajax
南栀的博客
12-17 3569
Ajax
JavaScript-Ajax基础讲解
OuYyds的博客
04-16 1889
ajax概述： ajax全称：异步的JavaScript和xml，他是用于发送http请求（支持异步请求） ajax的特点： 1.支持异步请求 2.实现局部刷新 3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录） ajax运用： 前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据 1.创建一个请求对象 request 请求 response 响应 let xhr = new
js-ajax(js)
muzidigbig的博客
07-03 2041
一、Ajax概述 1．什么是同步，什么是异步 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作） 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作） 2．Ajax的运行原理 页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提...
javascript的ajax
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
03-04 2249
（域名）:443（端口号）/course/list（路径）协议、域名、端口号，任何一个不一样，就是不同域与路径无关，路径一不一样无所谓不同域同域。
JavaScript-AJAX
yhwl66的博客
05-10 406
ajax （asynchronous JavaScript and xml）异步的JavaScript和xml（传输格式为xml 但一般为json），它主要是用于请求对应的数据来帮助渲染。优先使用强制缓存 如果没有强制缓存 使用协商缓存如果强制缓存了 那么协商缓存就不会被使用 且不会有请求发送如果没有强制缓存那么对应的协商缓存就会触发 主要比对的是最后修改时间和对应的文件标识如果都比对比成功那么就是使用协商缓存，如果没有比对上那么就不会缓存。
JavaScript核心技术之Ajax详解
热爱前端的大三在校生
10-10 1098
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。首先我们在控制台打印一下，看看。
JS中的Ajax
最新发布
桑稚远方的博客
08-22 1168
在 JavaScript 中，可以通过封装原生的 Ajax 请求来进行与服务器的数据交互。下面是一个封装了原生 Ajax 请求的示例代码，以及对代码的详细注解。
javascript进阶之AJAX
weixin_30607029的博客
04-05 210
AJAX 一 AJAX预备知识：json进阶 1.1 什么是JSON？ 　　JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象； 　　请大家记住一句话：json字符串就是js对象的一种表现形式(字符串的形式) 　　既然我们已经学过python的json模块，我们就...
JS中Ajax的方法和应用
zjjcchina的博客
01-19 1万+
XMLHttpRequest对象 Ajax技术的核心是XMLHttpRequest对象（简称XHR）,这是有微软率先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。 但因为IE的兼容性问题，这里对低版本的IE兼容性不做过多的描述。 XMLHttpRequest是一个构造函数，现在已经被各大浏览器厂商所支持，IE的话事支持IE7以上，XMLHttpRequest函数提供的方法有如下几个： open: open有三个参数，第一个参数规定了当前请求的类型(get、post、put、delete、h
六、AJAX-JavaScript核心内容精讲
qq_41994396的博客
05-08 290
readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义：0：未初始化 — 尚未调用.open()方法；1：启动 — 已经调用.open()方法，但尚未调用.send()方法；2：发送 — 已经调用.send()方法，但尚未接收到响应；3：接收 — 已经接收到部分响应数据；4：完成 — 已经接收到全部响应数据，而且已经可以在客户端使用了；
JavaScript中的Ajax详解
粥要熬。
09-06 783
Ajax简介： Ajax全称是”Asynchronous JavaScript and XML”(异步的JavaScript和XML)，它是有机地利用了一系列交互式网页应用相关地技术所形成的结合体。Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键–发送异步请求，接收响应以及执行回调。 XMLHttpRequest利用send()与open()方法与服务器进行交互。方法：
JavaScript的AJAX
chihuomiao的博客
05-27 228
Asynchronous JavaScript and XML AJAX是异步的JavaScript和HTML，读做埃阿斯，也有人会读成阿贾克斯 用来异步对象与服务器进行通信发送和接受各种格式的信息，包括JSON/XML/HTML/document 但是是搜索引擎支持度不够，因为数据不在页面上所以搜索引擎搜不到 AJAX只有在用到的时候会变/不需要重新加载整个页面只更新部分内容 它的作用是只更新页面上部分节点而不加载整个页面 JSON 这个对象只有两个方法 JSON更小更快更易解析它可转为任意语言的对
b站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件
04-23
好的，以下为B站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件： ```javascript /** * 搜索事件 */ function searchBook() { // 获取搜索框内容 var searchInput = document.querySelector("#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值