javascript 创建ajax函数 四部曲
开门见山简要的来写一个ajax函数，方便要用到ajax的时候来调用，下面附：获取 json 数据一个小实例，请在服务器下执行...
创建一个 ajax.js 文件把ajax函数代码放进去
//创建ajax函数四部曲 1.创建创建XMLHttpRequest对象 2.连接服务器 3.发送请求 4.接收数据
function ajax(url,sueeccd,lose){
// 1.创建XMLHttpRequest对象
//定义一个全局变量
var xhr = null;
//判断是否支持此对象
if (window.XMLHttpRequest) {
// W3C
xhr = new XMLHttpRequest();
}else{
//低版本的IE
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2.连接服务器
// '?t='+Math.random() 这句代码是为了清除浏览器缓存，GET为获取，POST为上传，true为异步，false为同步
xhr.open('GET',url+'?t='+Math.random(),true);
// 3.发送请求
xhr.send();
// 4.接收数据
//onreadystatechange事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
xhr.onreadystatechange=function(){
//当 xhr.readyState == 4那么就代表（完成）响应内容解析完成，可以在客户端调用了
if (xhr.readyState == 4) {
// xhr.status == 200 交易成功(OK),那么成功就执行下面的代码
if (xhr.status == 200) {
//responseText返回来的数据
sueeccd(xhr.responseText);
}else{
//失败了返回的数字来进行查找,如果我传了这个参数我才返回这个失败函数,否则不理它
if (lose) {
lose(xhr.status);
};
}
}
}
}
小实例：
创建一个 ajax.json 文件 创建对象
//创建json对象来测试
[{"name":"zion","age":"23","sex":"男"},{"name":"lee","age":"28","sex":"女"},{"name":"春哥","age":"25","sex":"你懂的!"}]
创建一个 ajax.html 文件来测试，记得把 ajax.js 文件引入进来
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="show"></div>
</body>
</html>
<script src="ajax.js"></script>
<script>
var oBtn = document.getElementById('btn');
var oShow = document.getElementById('show');
oBtn.οnclick=function(){
ajax('ajax.json',function(str){
// 先用eval()解析函数（json反馈值）
var strData = eval(str);
//遍历strData对象的数组
for(var i in strData){
//在DIV中显示返回的josn数据
oShow.innerHTML += strData[i].name+'<br/>';
}
},function(state){
//如果错误的时候就弹出一个错误返回值来方便查询出错原因!
alert(state);
})
}
</script>
对象 XMLHttpRequest 的 readyState属性 status属性 数字解释
属性readyState的含义:
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
属性status的含义:
0**：未被始化
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
100——客户必须继续发出请求(Continue)
101——客户要求服务器根据请求转换HTTP协议版本(Switching protocols)
200——交易成功(OK)
201——提示知道新文件的URL(Created)
202——接受和处理、但处理未完成(Accepted)
203——返回信息不确定或不完整(Non-Authoritative Information)
204——请求收到，但返回信息为空(No Content)
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件(Reset Content)
206——服务器已经完成了部分用户的GET请求(Partial Content)
300——请求的资源可在多处得到(Multiple Choices)
301——删除请求数据(Moved Permanently)
302——在其他地址发现了请求数据(Found)
303——建议客户访问其他URL或访问方式(See Other)
304——客户端已经执行了GET，但文件未变化(Not Modified)
305——请求的资源必须从服务器指定的地址得到(Use Proxy)
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除(Temporary Redirect)
400——错误请求，如语法错误(Bad Request)
401——请求授权失败(Unauthorized)
402——保留有效ChargeTo头响应(Payment Required)
403——请求不允许(由于服务器上文件或目录的权限设置导致资源不可用)(Forbidden)
404——没有发现文件、查询或URl(没有找到指定的资源)(Not Found)
405——用户在Request-Line字段定义的方法不允许(Method Not Allowed)
406——根据用户发送的Accept拖，请求资源不可访问(Not Acceptable)
407——类似401，用户必须首先在代理服务器上得到授权(Proxy Authentication Required)
408——客户端没有在用户指定的饿时间内完成请求(Request Timeout)
409——对当前资源状态，请求不能完成(Conflict)
410——服务器上不再有此资源且无进一步的参考地址(Gone)
411——服务器拒绝用户定义的Content-Length属性请求(Length Required)
412——一个或多个请求头字段在当前请求中错误(Precondition Failed)
413——请求的资源大于服务器允许的大小(Request Entity Too Large)
414——请求的资源URL长于服务器允许的长度(Request-URI Too Long)
415——请求资源不支持请求项目格式(Unsupported Media Type)
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段(Requested Range Not Suitable)
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求(Expectation Failed)
500——服务器产生内部错误(Internal Server Error)
501——服务器不支持请求的函数(Not Implemented)
502——服务器暂时不可用，有时是为了防止发生系统过载(Bad Gateway)
503——服务器过载或暂停维修(Service Unavailable)
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长(Gateway Timeout)
505——服务器不支持或拒绝支请求头中指定的HTTP版本(HTTP Version Not Supported )
12029——an unknown error occurred while processing the request on the server. the status code returned from the server was : 12029(原因:网络不通. 刷新一下就知道了)
转载于:https://www.cnblogs.com/zion0707/p/3889356.html
javascript 创建ajax函数 四部曲相关推荐
- Javascript中的函数重载-最佳做法
用JavaScript伪造函数重载的最佳方法是什么? 我知道不可能像其他语言一样重载Javascript中的函数. 如果我需要两个函数一起使用foo(x)和foo(x,y,z) ,这是最佳/首选方式: ...
- [转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
- Javascript 创建书签小工具 （bilibili视频下载为例）
书签小工具(Bookmarklets)是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能.这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践 ...
- CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
- jQuery与JavaScript与ajax三者的区别与联系
jQuery与JavaScript与ajax三者的区别与联系 简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页 ...
最新文章
- 《Android/OPhone 开发完全讲义》样章和目录下载
- 从头学习Drupal--基本架构二
- 思考--为何早晨型人更容易成功
- 后台开发技术--接入层设计
- android 保存流媒体,Android实现使用流媒体播放远程mp3文件的方法
- C语言求数组中的最大值
- 《数据库原理与应用》（第三版）第 1 章 数据库概述 习题参考答案
- visio数据流线文字方向的问题
- 性能可期——Netflix与Intel优化SVT-AV1
- js上传文件；input上传文件；
- 服务器虚拟多台linux,VirtualBox环境下基于多台Ubuntu虚拟机的Hadoop分布式计算环境搭建...
- Java线程类核心方法
- asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法...
- dmx512如何帧同步_DMX512协议的前世今生 数据格式及传输简介
- 熵增定律：为什么熵增理论让好多人一下子顿悟了
- unite_Unite 2016主题总结：有关图形，平台，VR等的新闻
- 用妙记多 Mojidoc 实践康奈尔笔记法
- Java程序员如何成为优秀的架构师
- 超详细的html+css基础知识树状图~HTML标签
- multithreading coding