原生ajax和Jquery的ajax有什么不同

今天小编给大家分享一下原生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有什么不同”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。