ajax简单介绍

没有AJAX会怎么样?普通的ASP.Net每次运行服务端方法的时候都要刷新当前页面。

假设没有AJAX,在youku看视频的过程中假设点击了“顶、踩”、评论、评论翻页,页面就会刷新,视频就会被打断。开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(仅仅有支持html5的浏览器能播放)。然后放一个“赞”button的功能(赞的数量存到数据库),看没有ajax会打断视频。看优酷则不会。




AJAX是一种进行页面局部异步刷新的技术。

用AJAX向server发送请求和获得server返回的数据而且更新到界面中。不是整个页面刷新。而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向server发出请求以及获得返回的数据。就像JavaScript版的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得server的返回数据,这样页面就不会刷新了。

XMLHTTPRequest是AJAX的核心对象



有些反复的东西,我们不希望每次使用的时候都自己手动再去又一次写一遍,或者又一次复制一遍,这时。我就须要对代码进行封装。

方法封装的原则:把不变的代码封装起来,把变的东西作为參数传递过去。

  1. //url:ajax请求地址带须要传递的參数,onsuccess:请求成功后运行的js方法
  2. function ajax(url, onsuccess)
  3. {
  4. var xmlhttp = window.XMLHttpRequest ?
  5.  
  6. new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象。考虑兼容性。XHR
  7. xmlhttp.open("POST", url, true); //“准备”向server的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求
  8.  
  9. //DRY:不要复制粘贴代码
  10. //AJAX是异步的,并非等到server端返回才继续运行
  11. xmlhttp.onreadystatechange = function ()
  12. {
  13. if (xmlhttp.readyState == 4) //readyState == 4 表示server返回完毕数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了。可是server还没有完毕响应的生成)
  14. {
  15. if (xmlhttp.status == 200) //假设Http状态码为200则是成功
  16. {
  17. onsuccess(xmlhttp.responseText);
  18. }
  19. else
  20. {
  21. alert("AJAXserver返回错误!");
  22. }
  23. }
  24. }
  25. //不要以为if (xmlhttp.readyState == 4) {在send之前运行!!!。
  26. xmlhttp.send(); //这时才開始发送请求。并不等于server端返回。请求发出去了,我不等!
  27.  
  28. 去监听onreadystatechange吧。
  29. }

通用ajax请求方法封装,兼容主流浏览器的更多相关文章

  1. axios浏览器异步请求方法封装 XMLHttpRequest

    axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...

  2. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  3. Ajax请求(二)--JQuery的Ajax请求方法

    JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...

  4. Css:背景色透明,内容不透明之终极方法!兼容所有浏览器

    转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...

  5. (转)兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...

  6. 基于promise对小程序http请求方法封装

    原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是 ...

  7. JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  8. ajax请求总是不成功?浏览器的同源策略和跨域问题详解

    场景 码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据.那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口隔壁老 ...

  9. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

随机推荐

  1. 护士当家第一至七季/全集Nurse Jackie迅雷下载

    英文译名Nurse Jackie,第1-7季(2009-2015)Showtime. 本季看点:<护士当家>是一部黑色医务剧,该剧特别邀请到荣获艾美奖和金球奖的Edie Falco出演女主 ...

  2. Android之录音工具类

    /** * 录音工具类 * * @author rendongwei * */ public class RecordUtil { private static final int SAMPLE_RA ...

  3. mongodb 脚本操作

    MO='mongo'$MO << EOFuse testdbdb.dropDatabase()show dbsexit;EOF

  4. 判断listview滑动方向的代码片段

    mListView.setOnScrollListener(new OnScrollListener() { private int lastIndex = 0; @Override public v ...

  5. Photoshop 使用阈值调整色阶

    1. 阈值原理 阈值的定义其实就是“临界点”,即过了这个临界点是一种情况(比如黑色),没有超过这个临界点是另外一种情况(比如白色),所以图像上只有黑.白两种情况出现.临界点的值由你定义: 阈值实际应用 ...

  6. 强大的模板引擎开源软件NVelocity

    背景知识NVelocity(http://sourceforge.net/projects/nvelocity )是从java编写的Velocity移植的.net版本,是java界超强的模版系统,.n ...

  7. 混沌分形之谢尔宾斯基(Sierpinski)

    本文以使用混沌方法生成若干种谢尔宾斯基相关的分形图形. (1)谢尔宾斯基三角形 给三角形的3个顶点,和一个当前点,然后以以下的方式进行迭代处理: a.随机选择三角形的某一个顶点,计算出它与当前点的中点 ...

  8. go语言之进阶篇拷贝文件案例

    1.文件案例:拷贝文件 示例: package main import ( "fmt" "io" "os" ) func main() { ...

  9. 解决在非Activity中使用startActivity

    错误提示信息: Caused by: android.util.AndroidRuntimeException: Calling startActivity() from outside of an ...

  10. ARouter 路由 组件 跳转 MD

    目录 简介 支持的功能 典型应用 简单使用 进阶使用 更多功能 其他 Q&A Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs bai ...