ajax请求技术
1.写在前面:
阅读要求:
具有一定的HTML、CSS、JavaScript、Json基础
2.什么是ajax
Ajax:即”Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
3.为什么使用ajax
在动态网页开发技术中,客户端(通常是浏览器)与服务端进行数据交互是十分频繁的,如何节省网络资源,提供良好的用户体验是十分关键的。Ajax采用异步请求方式,使得不用刷新整个页面就可以和后台实现数据交互,从而更新内容...
4.如何使用原生的ajax
使用ajax技术的关键点落在了XMLHttpRequest(注:ie5、ie6使用ActiveXObject)对象上,因此利用好该对象是关键
注意:
function loadData() {
//创建XMLHttpRequest对象
var xmlHttpRequestObj = {};
//创建json对象,传送json格式数据到服务端
Var jsonObj = {};
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequestObj =new XMLHttpRequest();
} else {
// IE6, IE5
xmlHttpRequestObj =new ActiveXObject("Microsoft.XMLHTTP");
}
//当请求状态改变时会调用xmlHttpRequestObj .onreadystatechange方法
xmlHttpRequestObj .onreadystatechange = function() {
if (xmlHttpRequestObj .readyState == 0 ) {
Alert(“open()函数未执行”);
} else if(xmlHttpRequestObj.readyState == 1) {
Alert(“open()函数已执行,send()函数未执行”);
} else if(xmlHttpRequestObj.readyState == 2) {
Alert(“send()函数已执行,头部和状态码可以获取”)
} else if(xmlHttpRequestObj.readyState == 3) {
Alert(“头部已收到,解析响应体”);
} else if(xmlHttpRequestObj.readyState == 4) {
Alert(“请求完成”);
If (xmlHttpRequestObj.status == 200) {
Alert(“响应就绪,反序列化json对象填充数据到页面”);
} else if (xmlHttpRequestObj.status == 400) {
Alert(“页面丢失”);
} else {
Alert(“服务异常”);
}
}
}
//method:请求方式:GET、POST、PUT、DELETE... Url:请求的地址 asnyc:是否采用异步
xmlHttpRequestObj.open("method", "url", async);
//设置请求头,POST请求格式需要载入,其他不需要
xmlHttpRequestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//请求数据,参数为jsonObj json对象
xmlHttpRequestObj.send(jsonObj);
}
5.交流与讨论:
如有纰漏,望斧正,转载请注明出处...
ajax请求技术的更多相关文章
- HTTP管线化技术--ajax请求
1.管线化技术——客户端可以发送多次请求到服务端,而不需要等待上一次请求得到响应的时候才能进行下一次请求.实现并行发送请求 2.ajax——实现网页异步刷新 问题:当用户进行多次ajax请求的时候,并 ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- ajax请求后台,返回json格式数据,模板!
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- AJAX请求遭遇未登录和Session失效的解决方案
使用技术:HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定.但是AJAX却是例外的,所以解决方法是设置响应为session失效. 一 ...
- 关于Ajax的技术组成与核心原理
1.Ajax 特点: 局部刷新.提高用户的体验度,数据从服务器商加载 2.AJax的技术组成 不是新技术,而是之前技术的整合 Ajax: Asynchronous Javascript And Xml ...
- AJAX背景技术介绍
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 主要包含了以下几种技术: Ajax(A ...
- 捣鼓一个Ajax请求管理器
随着前端技术的不断发展,现在做的项目里很多页面里都会有大量的ajax请求,随之而来就有了一些问题: 1.没必要的ajax请求怎么处理? 2.ajax链式调用怎么维护? ajax链式调用最原始的写法: ...
- Ajax请求汇总(一)
刚开始结束Ajax请求的时候,那真的是迷迷糊糊,昏天暗地,通过学习的深入和翻阅各种资料.求助度娘,总结一下Ajax请求,与大家分享一下,希望能给学习Ajax的同学一些帮助,废话不多手,直接开始~~~ ...
随机推荐
- DotNet处理服务器路径的方法
项目中需要使用到路径处理的地方比较多,对于路径的解析和匹配有时较为繁琐,现在提供一个对路径进行解析的方法: 1.验证设置路径字符串: /// <summary> /// 验证设置路径字符串 ...
- maven pom中 设置远程仓库url
<repositories> <!--<repository>--> <!--<id>spring-snapshots</id>--& ...
- Moon.Orm 5.0 (MQL版) 欣赏另一种Orm的设计风格----大道至简
Moon.Orm 5.0(MQL版)使用指南(二) 一.使用sql及存储过程 1)使用List<Dictionary<))) 2)MQL 全面接触
- thinkphp验证码
thinkphp自带验证码 前端页面: <div style="position:absolute;z-index:3;top:160px;left:180px;"> ...
- VMWare 安装 Mac OS X10.10 Yosemite
OS X Yosemite 新功能特性 Mac OS X10.10 GM3|OS X 10.10 Yosemite 正式版下载 如何在虚拟机中安装苹果mac系统图示说明 vm10虚拟机安装Mac OS ...
- 从零开始学Python第六周:面向对象基础(需修改)
标签(空格分隔): 面向对象 一,面向对象基础 (1)面向对象概述 面向过程:根据业务逻辑从上到下写代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类 ...
- PostgreSQL保存文件到数据库
1.CREATE TABLE public.t_file ( id INTEGER PRIMARY KEY NOT NULL DEFAULT nextval('t_file_id_seq'::regc ...
- 安卓模拟器genymotion连接eclipse成功但是不显示其中项目
安卓模拟器困了我两三天了,原装模拟器比较慢,忍受不了,查到安卓模拟器的神器——genymotion 按照网上的步骤一步步都安装完毕,最后打开后发现,genymotion界面里面没有找到新建的工程, 这 ...
- rest api参数与content-type
最近为项目组提供rest api 时遇到了关于接口参数的传递问题,主要是没有充分考虑到第三方调用者的使用方式,应该尽量的去兼容公司之前提供出去的接口调用方式,这样可以降低第三方调用者的学习成本,尽管之 ...
- MVC Razor语法
Razor语法, 视图引擎 Razor(CSHTML) @ 可以编写一条C#语句@{} 可以编写一组C#语句,也有可能嵌着Html@: 将文字内容直接输出到页面上去@() 在一句中将一段C#代码包括起 ...