建站
咨询
售后
建站咨询
今天小编给大家分享一下原生ajax和Jquery的ajax有什么不同的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联公司网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、响应式网站建设、行业门户型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，创新互联公司网站制作为客户规划、按需开发符合企业需求、带有营销价值的网络建站方案认真对待每一个客户，我们不用口头的语言来吹擂我们的优秀，数千家的成功案例见证着我们的成长。
原生ajax
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
传统请求（同步方式）的问题
当网速比较慢或服务器太忙时，客户端(浏览器)在没有收到服务端返回的响应之前一直处在线等待状态，用户体验不好。
Ajax优势和作用
使用ajax技术后用户体验好，同时可以减轻服务端的压力。
ajax的应用场景：百度搜索框、百度地图、检查用户是否注册过、页面的局部刷新等。
Ajax请求与传统请求的区别：
传统方式请求：
ajax方式请求
ajax原理（方法，属性 ）
XMLHttpRequest
let xhr =new XMLHttpRequest();
描述：创建 ajax对象
open
xhr.open('请求方式','请求地址',true/false); //true：表示异步 false:表示同步
描述：创建请求给ajax对。
send
语法：
xhr.send(string)
描述：ajax对象将请求发送到服务器。string：仅用于 POST 请求
属性
readyState
xhr.readyState
描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。
包含的状态值：
(1)0：请求未初始化，还没有调用open
(2)1：请求已经建立，但是还没有发送send
(3)2：请求已经发送
(4)3：请求正在处理中，通常响应中已经有部分数据可以用了
(5)4：响应已经完成，可以获取并使用服务器的响应
tatus
语法：
xhr.status
描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)
常见状态码：200，304，404，500
responseText
语法：
xhr.responseText
描述：获得来自服务器的响应
事件
语法：
xhr.onreadystatechange = callback
描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件处理服务端返回的响应
ajax实现步骤
(1)创建Ajax对象
(2)Ajax请求的地址与请求方式
(3)发送请求
(4)获取服务器响应给客户端的数据
(5)处理服务器响应数据JSON.parse和JSON.stringify
ajax的get和post传参
get
语法：
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述：get传参只需要在url地址后按照?key=value格式进行传递
服务端代码如下：
const experss = require('express');
const path = require('path');
const app = experss();
app.listen(3000, () => {
console.log(——web服务器工作在3000端口——);
});
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);
//注册用户界面：
app.get('/zhuce', (req, res) => {
res.render('zhuce.html');
});
//检查用户是否注册过：
app.get('/checkuser', (req, res) => {
//获取用户：
let uname = req.query.uname ? req.query.uname : '';
if (uname == 'demo') { //已注册
res.send({ "msg": "用户已注册", "status": 500 });
} else { //未注册
res.send({ "msg": "用户可用", "status": 200 });
}
});
zhuce.html文件代码如下：
以上就是“原生ajax和Jquery的ajax有什么不同”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
名称栏目：原生ajax和Jquery的ajax有什么不同
转载源于：http://lswzjz.com/article/pgjpih.html
