Ajax-快速上手前后端交互
Ajax
在之前自己也有总结过关于Ajax的笔记,各种的懵圈,通过一次项目和几次的总结和分享,我对Ajax终于算是有了一定的理解和自己的见解。相信大家见过和度过了很多的关于Ajax的什么前世今生、大刀阔斧等文章,我自己也受益匪浅。在这里我就谈谈自己的简单理解和用法。
Ajax是什么?
Ajax就是当浏览器(客户端)向服务器发送请求时用的一种技术,它的核心是XMLHttpRequest对象,他最大的特点就是向服务器请求额外的数据而无须加载页面(刷新),既异步加载。Ajax技术是怎样实现请求的?
目前Ajax技术有两种方式实现请求:一、通过他的核心对象XHR(XMLHttpRequest的缩写);二、通过window.fetch()方法进行请求。
1.1通过XHR对象进行请求(原生js)代码如下://1、创建XHR对象
var request = new XMLHttpRequest();//在大多数浏览器中,在ie5、ie6中不支持这个方式
//在ie5、ie6中兼容只需定义下面这个函数
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
} //2、进行请求完整代码
var xhr = '';
var requestData = '';
//兼容性处理
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} xhr.open('GET/POST','url',true/false);//get和post请求,true为异步请求、false我为同步请求,请求的URL中可带参数进行请求
xhr.setRequestHeader("Content-type", "application/json");//添加http头信息,该函数的顺序必须是open之后,send之前
xhr.send(JSON.stringify({
name: '小明',
age: 20
}));//post的send(String)必须要,send用于发送请求参数,如果不需要请求体发送请求参数,则为null。
//send传输的数据是以json数据格式传给后台的。
//返回响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
//请求成功的处理函数,服务器返回的数据存入responseText属性中
requestData = xhr.responseText;//获取到后台响应的数据
var date = JSON.parse(requestData);//将响应数据转化成json格式,以便使用
//使用数据
//~~~
}else{
//请求数据错误的处理函数
}
}else{
//ajax发送失败,没有得到响应数据
}
}
1.2使用jQuery的$.ajax()方法实现请求,代码如下:
$.ajax({
type: 'GET',//请求方式
url: 'url',//请求资源地址或请求接口
data: {
//请求参数
},
success: function(data){//服务器响应的数据都存入data中
//请求成功处理函数
if(data.status === '0'){
alert(data.message);
} else {
//向自己的html添加服务器响应的数据
}
}
error: function(){
//请求失败处理函数
}
});
2、目前市场上已经在使用window.fetch()方法,XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。Fetch 的出现就是为了解决XHR的问题
他的请求代码如下:window.fetch(url).then(function(response){//响应值放入response中
return response.json();//用json()方法把相应的数据转化为javascript对象
}).then(function(data)
//请求成功处理函数
}).catch(function(e){
//请求失败处理函数
})
Ajax扩展
Ajax为了扩充他的功能,发展了XHR2,这里我就不再详细说明,想要对Ajax的请求做详细了解的可以查看我最初的Ajax学习笔记!
Ajax-快速上手前后端交互的更多相关文章
- content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
- SSM-网站后台管理系统制作(4)---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- ajax学习----json,前后端交互,ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...
- 从MVC到Ajax再到前后端分离的思考
前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
- 前后端交互实现(nginx,json,以及datatable的问题相关)
1.同源问题解决 首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置 然后再终端下cmd nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过, ...
随机推荐
- 作为一名合格的JAVA程序员需要点亮那些技能树?
以下是出现次数超过100的一些技能,大家可以做一个参考. Spring 299 MySQL 290 JavaScript 216Linux 165J2EE 151设计模式 148Struts2 138 ...
- 微信小程序-学习总结(1)
微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 设备 rpx换算成px(屏幕宽度/750) ...
- MySQL中数据中设计中的范式与反范式
设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小.但是有些时候一昧的追求范式减少冗余,反而会降低数据读写 ...
- Longest Common Prefix -最长公共前缀
问题:链接 Write a function to find the longest common prefix string amongst an array of strings. 解答: 注意 ...
- 通过存储过程运行通过DBLINK的查询语句失败-单个语句成功--ORA-00604
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/q947817003/article/details/24419459 客户遇到个问题,描写叙述例如以 ...
- golang模板语法简明教程(后面有福利哦)
template是go 语言web开发中必不可少的,特此记录下来: [模板标签] 模板标签用"{{"和"}}"括起来 [注释] {{/* a comment ...
- Groovy系列-groovy比起Java--有哪些地方写起来更舒服?
groovy比起java-有哪些地方写起来更舒服 java发展缓慢,语法落后冗余 说起java,其实java挺好的,java现在的性能也不错,但是,java的语法显然比较落后,而且冗余,getter/ ...
- django-admin引用百度地图
实现的功能有,某个地点对应的经纬度自动填上,如果有经纬度的话,自动显示对应经纬度的地点,密匙在去百度地图引用搜索 <script type="text/javascript" ...
- iOS Autolayout 在tableView scrollView 适用 学习
1 如何自动适应cell的高度 autolayout 里面 使用 systemLayoutSizeFittingSize 方法 (系统通过 已知的完整的Constraints和view的属性来计算 ...
- asp.net,关于Listview+DataPager控件使用
关于Listview+DataPager控件使用1.DAL层,根据开始条数+结束条数查询数据.2.BLL层,startRowIndex和maximumRows进行查询.(startRowIndex + ...