通用ajax请求方法封装,兼容主流浏览器
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的核心对象
有些反复的东西,我们不希望每次使用的时候都自己手动再去又一次写一遍,或者又一次复制一遍,这时。我就须要对代码进行封装。
方法封装的原则:把不变的代码封装起来,把变的东西作为參数传递过去。
//url:ajax请求地址带须要传递的參数,onsuccess:请求成功后运行的js方法
function ajax(url, onsuccess)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象。考虑兼容性。XHR
xmlhttp.open("POST", url, true); //“准备”向server的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码
//AJAX是异步的,并非等到server端返回才继续运行
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4) //readyState == 4 表示server返回完毕数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了。可是server还没有完毕响应的生成)
{
if (xmlhttp.status == 200) //假设Http状态码为200则是成功
{
onsuccess(xmlhttp.responseText);
}
else
{
alert("AJAXserver返回错误!");
}
}
}
//不要以为if (xmlhttp.readyState == 4) {在send之前运行!!!。
xmlhttp.send(); //这时才開始发送请求。并不等于server端返回。请求发出去了,我不等! 去监听onreadystatechange吧。
}
通用ajax请求方法封装,兼容主流浏览器的更多相关文章
- axios浏览器异步请求方法封装 XMLHttpRequest
axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...
- 兼容主流浏览器的CSS透明代码
透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; ...
- Ajax请求(二)--JQuery的Ajax请求方法
JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...
- (转)兼容主流浏览器的CSS透明代码
透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...
- 基于promise对小程序http请求方法封装
原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是 ...
- JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...
- ajax请求总是不成功?浏览器的同源策略和跨域问题详解
场景 码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据.那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口隔壁老 ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
随机推荐
- spring websocket自动断开连接再创建引发的问题解决方案
问题:由于 web session 超时时间为 30 分钟,如用户在 web session 规定时间内没有退出系统,但由于其它原因 用户却断开的 websocket 的连接,如果用户还要聊天或是其它 ...
- centOS7下实践查询版本/CPU/内存/硬盘容量等硬件信息
1.系统 1.1版本 uname -a 能确认是64位还是32位,其它的信息不多 [root@localhost ~]# uname -a Linux localhost.localdomain 3. ...
- Oracle初级索引学习总结
前言 索引是常见的数据库对象,建立索引的目的是为了提高记录的检索速度.它的设置好坏,使用是否得当,极大地影响数据库应用程序和Database的性能.虽然有许多资料讲索引的用法,DBA和Develop ...
- Java并发编程的艺术(二)——重排序
当我们写一个单线程程序时,总以为计算机会一行行地运行代码,然而事实并非如此. 什么是重排序? 重排序指的是编译器.处理器在不改变程序执行结果的前提下,重新排列指令的执行顺序,以达到最佳的运行效率. 重 ...
- 使用Logstash创建ES映射模版并进行数据默认的动态映射规则
本文配置为 ELK 即(Elasticsearch.Logstash.Kibana)5.5.1. Elasticsearch 能够自动检测字段的类型并进行映射,例如引号内的字段映射为 String,不 ...
- Excel 2016 Power View选项卡不显示的问题
https://zhuanlan.zhihu.com/p/43543442 PowerView是Excel中的Power系列插件之一,可以基于excel制作交互式仪表板. 初学者在使用Power Vi ...
- Netty 中 IOException: Connection reset by peer 与 java.nio.channels.ClosedChannelException: null
最近发现系统中出现了很多 IOException: Connection reset by peer 与 ClosedChannelException: null 深入看了看代码, 做了些测试, 发现 ...
- MySQL 查询优化简记
今天尝试对一张MySQL表做查询优化, 500W数据 但是发现加了索引比不加索引使用全表扫描还慢, 上网查, 据说是因为需要回表, 因为没有用到 using index(覆盖索引), 而回表查询是随机 ...
- webrequest HttpWebRequest webclient/HttpClient
webrequest(abstract类,不可直接用) <--- (继承)---- HttpWebRequest(更好的控制请求) <--- (继承)---- webclient (简单快 ...
- 修改visual studio2010 的快捷键,使用ctrl+W 关闭当前文档
废话不多说,打开visualstudio 的菜单 [工具]->[选项].定位到 环境->键盘. 找到光口.关闭文档窗口.把默认的ctrl+F4移除,因为这两个组合键按起来太麻烦,太累了.再 ...