一篇文章搞定ajax局部刷新(原生JS)

转载 2016年08月29日 09:17:14
ajax可以理解为在后台偷偷摸摸的刷新又不告诉你。
它的工作流程是这样的:点击页面标签->发送请求到后端,拿到一个结果->把结果显示到页面那我们转换成计算机语言就应该是4步
1.先实例化js的XMLHttpRequest这个内置对象var xhr = new XMLHttpRequest;
2.设置open这个方法准备请求xhr.open(method,页面); //第一个参数是设置method是GET还是POST,第二个页面是后端操作注意。GET请求xhr.open("get","index.php?id=1&sid=1"); //是把值放到地址栏传过去POST请求xhr.open("post","index.php"); //如果是post的话地址栏后面为空
3.调用send方法把信息提交到后端GET请求xhr.send(); //就这样就好了POST请求xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("id=1&sid=1"); //注意要设置请求头,设置为表单请求,把值放在send内
4.取得效果之后显示到前端
4-1.判断是否已经执行完毕xhr.onloadend = function(){//
4-2.执行完毕,判断响应头是否为200.判断是否正常的意思if(xhr.status==200){//如果进来这里就代表一切正常。能拿到值了alert(xhr.responseText);}}上面就是怎么用js来实现ajax。
那如果是jquery里面就方便多了在jQuery中。如果需要调用ajax,就需要先导入jquery包然后调用ajax的方法
1.导入jQuery包一篇文章搞定ajax局部刷新(原生JS)
2.调用ajax方法。在jquery中有6个ajax相应的常用方法需要我们去学的
2-1:loadload是把加载页面的内容显示到当前页面上$("#div").load("index.php",[JSON data],[function]);把JSON对象的内容传到index.php做处理之后把页面输出的内容返回到#div内
2-2:get$.get("index.php",[JSON data],function,[type]);把JSON对象内容传到index.php做处理,执行成功后会调用function方法,type参数如果为json则会返回一个JSON对象当然也可以把JSON data写在index.php后面:index.php?id=1&username=1;
2-3:post$.post("index.php",[JSON data],function,[type]);原理是与GET相同的。不过不可以把值放在index.php后面
2-4:ajax$.ajax({url:"index.php",type:"post",data:"id=1&username=1",dataType:"json", //如果选了json就会返回json对象success:function(val){//ajax成功就执行},beforeSend:function(){//准备发送ajax之前执行},complete:function(){//无论成功还是失败都会执行}})其实$.ajax就是$.get和$.post的底层,当执行成功之后就会执行函数2-5:ajaxStart$("#loading").ajaxStart(function(){//当ajax准备发送之前执行})
2-6:ajaxStop$("#loading").ajaxStop(function(){//当ajax完成之后执行})我们可以这么理解。complete和ajaxStop是一对,beforeSend和ajaxStart是一对。假如我需要在异步加载之前显示一个loading的圈圈。异步完成就隐藏。如果我们是用$.ajax()就可以用beforeSend和complete来完成了。但是如果我们要用$.post的话,就没有这功能,所以只能用ajaxStart和ajaxStop来完成。
可以这么理解。beforeSend、complete是私有的,而ajaxStart和ajaxStop是共有的。当设了beforeSend的同时又存在ajaxStart的话会执行beforeSend我是庆恺。
这是一个程序员+运营新人的自媒体号,记录着自己的一路成长,如果你觉得这篇文章对您有帮助,我会觉得,这世界上至少有人因为我而得到改变。
原创文章,转载请标明出处。谢谢。


作者:头条号 / 庆恺的笔记
链接:http://toutiao.com/a6323673596863578370/
来源:头条号(今日头条旗下创作平台)
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

AJAX的原理-如何做到异步和局部刷新

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChang...
  • fyxxq
  • fyxxq
  • 2014年03月26日 23:19
  • 33711

HTML中使用Ajax进行局部刷新页面

使用Ajax进行用户名动态校验,局部刷新页面1.在HTML页面中使用js脚本将请求数据发送给后台servlet 由按钮触发事件 查询 由js脚本对将数据发送到后台 var req = new ...
  • u013360850
  • u013360850
  • 2016年10月09日 20:13
  • 18576

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法...
  • w2222288
  • w2222288
  • 2015年04月30日 11:45
  • 15213

JS AJAX实现页面局部刷新~~~~

http://apps.hi.baidu.com/share/detail/34363149 AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人...
  • IT_LOSER
  • IT_LOSER
  • 2016年11月10日 09:56
  • 4356

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法...
  • smszhuang168
  • smszhuang168
  • 2013年11月30日 10:17
  • 23539

AJAX局部刷新

论浏览器的局部刷新标签(空格分隔): ajax jsonp何谓局部刷新局部刷新是相对全局刷新而言的。在ajax出现之前,浏览器跟服务器交互一般是通过form表单的形式,或post或get,不管采用哪种...
  • shushanfx
  • shushanfx
  • 2016年07月03日 22:50
  • 698

AJAX实现局部刷新

AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人~~~   虽然AJAX是very strong的,但是呢,它也是有使用范围的,我这里交...
  • WB1224678
  • WB1224678
  • 2017年01月12日 21:23
  • 1680

JQuery的Ajax请求实现局部刷新 小案例

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象...
  • ABCJIECBA
  • ABCJIECBA
  • 2011年08月05日 16:52
  • 18979

ajax全局事件引用方式以及各个事件(全局/局部)执行顺序

jquery的ajax方法的全部全局事件: ajaxStart:ajax请求开始前 ajaxSend:ajax请求时 ajaxSuccess:ajax获取数据后 ajaxComplete:aj...
  • CountryLord
  • CountryLord
  • 2017年06月08日 20:02
  • 283

Javascript & HTML5 使用Ajax自动更新页面数据

通过设置interval和ajax,来实现页面数据的更新,亮点是只更新一个
  • willproud
  • willproud
  • 2014年05月20日 20:39
  • 3637
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一篇文章搞定ajax局部刷新(原生JS)
举报原因:
原因补充:

(最多只允许输入30个字)