AJAX简单

最新推荐文章于 2022-08-30 16:39:01 发布

高鹏飞白羊

最新推荐文章于 2022-08-30 16:39:01 发布

阅读量88

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/100741319

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

1，同步

在一个任务进行中不能开启其他任务
同步访问：浏览器向服务器发送请求时，浏览器只能等待服务器的响应，不能做娶她事情
出现场合：
地址栏网页访问
a标签跳转
submit提交

2，异步

在一个任务进行中可以开启其他任务
出现场合：
用户名验证
搜索词条
股票走势

3，异步请求的步骤

1，创建异步对象
2，绑定监听事件（接受请求）
3，打开连接（创建请求）
4，发送请求

4,创建异步对象

标准创建
var xhr=new XMLHttpRequest();
IE8以下版本创建
通过判断widow.XMLHttpRequest来判断浏览器是否支持标准创建
if(widow.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{var xhr=new ActiveXObject(“Microsoft.XMLHttp”);}
var xhr=new ActiveXObject(“Microsoft.XMLHttp”);

5，异步对象的属性和方法

1，readyState属性
值0-4,5个状态
0：请求没有初始化
1：已经打开到服务器连接，正在发送请求
2：正在接受响应头
3：接受响应主体
4：接受响应数据接受成功
2，status服务器的响应状态码
3，onreadystatechange
当xhl对象的readyState属性改变的时候自动激发
4，responseText

6，创建请求打开连接

xhr.open(method,url,isAsyn);
method：请求方法
url：访问服务器的地址（接口）
isAsyn：是否采用异步的方式请求true

7,发送请求

xhr.send(body);
使用get方法，body为null，或者不写
使用post方法，要创建主体

ajax文件

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	</head>
	<body>
		<script>
			//1，创建异步对象
			var xhr=new XMLHttpRequest();
			console.log(xhr);
			//2，绑定监听事件（接受请求）
			xhr.onreadystatechange=function(){
				//此方法会被调用4次
				//最后一次才有效
				//并且响应状态码为200
				if(xhr.readystats==4 && status==200){
					//把相应数据存储到变量result中
					var result=xhr.responseText;
					console.log(result);
					
				}
			}
			//3，打开连接（创建请求）
			xhr.open("get","/demo/ajaxDemo",true);
			//4，发送请求
			xhr.send(null);
		</script>	
	</body>
</html>

app.js文件服务器文件

//服务器端的文件
const express=require('express');
//psot
const bodyParser=require('body-parser');
const demoRouter=require('./routers/demo.js');
var server=express();
server.listen(8888);
//托管静态资源到public
server.use(express.static('./public'));

//使用路由器管理路由
//把用户路由器挂载到/user,访问形式/user/detail,所以HTML中要改
server.use(bodyParser.urlencoded({
	extended:false
}));
server.use('/demo',demoRouter);

路由器文件
const express=require(“express”);
const pool=require("…/pool.js");
var router=express.Router();
router.get("/ajaxDemo",(req,res)=>{
res.send(“这是我的第一个AJAX程序”);
});
module.exports=router;

打开浏览器连接：http://127.0.0.1:8888/ajax01.html
在这里插入图片描述

高鹏飞白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX简单

1，同步在一个任务进行中不能开启其他任务同步访问：浏览器向服务器发送请求时，浏览器只能等待服务器的响应，不能做娶她事情出现场合：地址栏网页访问a标签跳转submit提交2，异步在一个任务进行中可以开启其他任务出现场合：用户名验证搜索词条股票走势3，异步请求的步骤1，创建异步对象2，绑定监听事件（接受请求）3，打开连接（创建请求）4，发送请求4,创建异步对象标准...
复制链接

扫一扫