原生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文件代码如下:

   

   

   

    Document

   

帐号:

   

密码:

   

密码:

   

   

以上就是“原生ajax和Jquery的ajax有什么不同”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


名称栏目:原生ajax和Jquery的ajax有什么不同
网站链接:http://pwwzsj.com/article/pgjpih.html