前端基础篇——浅谈Ajax并简单实现案例

最新推荐文章于 2022-04-19 15:11:59 发布

爱编程的胖虎

最新推荐文章于 2022-04-19 15:11:59 发布

阅读量432

点赞数 1

文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_49600123/article/details/107735047

版权

一、什么是Ajax

Ajax官方给出的定义是：一种创建交互式动态网页应用的网页开发技术。
当然个人觉得简单概括就是一个实现前端浏览器与后台服务器数据交互的一种通信方式。其核心是XMLHttpRequest对象（我们简称为XHR）

二、XHR的用法

既然我们知道XHR对象是Ajax的核心，那么我们就要掌握该对象的一些核心属性和方法。首先我们创建XHR对象：

 var xhr=new XMLHttpRequest()

open()方法
该方法用来启动一个请求以备发送，接收三个参数，分别代表请求的方法（主要为 GET 和 POST ），请求的URL地址，是否为异步请求方式的布尔值。

xhr.open('get',url,true);

send()方法
该方法用来发送请求，其中接收一个参数用来表示请求主体发送的数据（主要用于post请求）,如果不需要请求体发送数据则传入null

xhr.send()

responseText 和 status属性
responseText属性代表请求响应返回的文本：status代表相应的http状态
readyState属性
该属性代表请求/响应的一个过程阶段，可取的值为：
0：代表尚未调用open()方法
1：调用open()方法，但未调用send()方法
2：已经调用send()方法，但尚未接收到响应
3：已经接收到部分响应数据
4：已经接收到全部响应数据（重点关注）
readystatechange()事件
该事件用来检测每次状态变化后readyState的值，其值每变化一次，都会触发一次该事件

三、Ajax的简单实现

1：首先我们实现一个简单的HTML，创建一个按钮绑定事件用来点击实现Ajax请求

<!DOCTYPE html>
<html land='en'>
<head>
<meta charset="utf-8">
<title>da</title>
</head>
<body>
<div>
	<input type="button" value="请求" onclick="Ajax()">
</div>
<script>
    function Ajax(){
    }
</script>
</body>
</html>

2：通过node搭建一个测试接口

var express=require('express');
var app =express();
var bodyParser = require('body-parser'); 
app.use('/public',express.static('public'));
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
 });
 //实现测试接口
app.get('/ha',function(req,res){
    console.log(req.query.name)
    res.send('helloworld')
})
//配置服务端口
var server = app.listen(3008, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
})

3：Ajax的实现，这里我们请求的url地址为 http://localhost:3008 ，这里使用get实现，必要时将查询字符串添加到url末尾

<!DOCTYPE html>
<html land='en'>
<head>
<meta charset="utf-8">
<title>da</title>
</head>
<body>
<div>
	<input type="button" value="请求" onclick="Ajax()">
</div>
<script>
    function Ajax(){
        var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					alert(xhr.responseText)
					}
			}
		}
        xhr.open('get','http://localhost:3008/ha?name=张三',true);
        xhr.send(null);
    }
</script>
</body>
</html>

通过控制台可以看到请求成功了，同时在 Node 控制台看到查询字符串
在这里插入图片描述

在这里插入图片描述

三、简单说说Ajax的优缺点

优点：
1、实现了页面无刷新更新数据
2、采用异步通信
3、前后端负载均衡

缺点：
1、存在明显安全问题
2、对搜索引擎支持较弱

最后说一下，本人目前属于前端小白，最重要的是希望能向各路大神学习经验和知识，同时会不定期的更新一些近期所学。有兴趣的可以关注一起交流分享知识和踩坑经验。

爱编程的胖虎

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础篇——浅谈Ajax并简单实现案例

一、什么是AjaxAjax官方给出的定义是：一种创建交互式动态网页应用的网页开发技术。当然个人觉得简单概括就是一个实现前端浏览器与后台服务器数据交互的一种通信方式。其核心是XMLHttpRequest对象（我们简称为XHR）二、XHR的用法既然我们知道XHR对象是Ajax的核心，那么我们就要掌握该对象的一些核心属性和方法。首先我们创建XHR对象： var xhr=new XMLHttpRequest()open()方法该方法用来启动一个请求以备发送，接收三个参数，分别代表请求的方法（主要为
复制链接

扫一扫