自定义小型ajax框架-ajax讲义二
上一讲讲了一个ajax的应用，改变form的默认提交方式，将其所有的字段通过ajax提交，方便了ajax的操作流程。代码借助jquery完成的，jquery是个优秀的js框架，使用它可以简化js的开发流程，但是这一次我讲的是使用纯js来实现ajax。那么有什么意义呢，这里当然不是为了学究，下面情况就需要用纯js了：很多js的新手可能不会用到jquery；最移动开发时，会发现移动设备上加载jquery这样的库会比PC机上慢很多，而且是不能忍受的。
闲话不再多说，先来个旋风式介绍，看下面代码：
/** * @param method 发送的方式，post或者get * @param url 发送的url地址 * @param content 要发送的参数内容 * @param callback 监听函数 */ function send_request(method,url,content,callback){ http_request=false; //获取ajax对象 if(window.XMLHttpRequest){//非IE浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMimeType) http_request.overrideMimeType("text/xml"); } else if(window.ActiveXObject){//IE浏览器 try{ http_request=new ActiveXObject(Msxml2.XMLHTTP); }catch(e){ try { http_request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if (!http_request){ window.alert("不能创建XMLHttpRequest对象实例"); return false; } http_request.onreadystatechange=function(){callback();}; //if(method.toLowCase()=="get"){ if(method=="get"){ http_request.open(method,url,true);//设置发送地址和发送方式 } //else if(method.toLowCase()=="post"){ else if(method=="post"){ http_request.open(method,url,true); http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); http_request.setRequestHeader("If-Modified-Since","0"); } else{ windows.alert("http请求参数类别错误！"); return false; } http_request.send(content);//发送数据 }
代码段1.2.1 自定义ajax框架
下面是对这个自定义框架的使用Demo：
function sendAjax() { send_request('post','http://192.168.133.72/my_info.php',null,function() { if(http_request.readyState==4){ if(http_request.status==200){ alert(http_request.responseText); }else{ alert(http_request.status); } }else{ } }); }
代码段 1.2.2 使用自定义ajax框架
拿到上面两份代码，你脑子里可能会用很多大大的问号，为什么会是这个样子？我们不得不承认，只有搞清楚一个对象的原理，我们才能更好的利用其特性。当然我们现在并不仅仅是为了学习ajax的特性，更重要的是要大家先搞懂上面的代码，为此我不得不学究一把（被逼的）。
在代码段1.2.1中，我们首先取得一个ajax对象，注意在在不同的浏览器中获取ajax对象的方式是不一样的，IE6和IE5.X中使用activeX方式创建ajax对象，非IE浏览器和IE7和更高版本的IE浏览器使用XMLHttpRequest对象创建AJAX对象。接下来是设置ajax对象的onreadystatechange属性，on readystate change，顾名思义，“当状态变化时”做处理。原来ajax在运行，有一个属性会随程序运行而不断改变，他就是readstate属性，每次readystate变化时，都会调用callback，即代码段1.2.1中的第29行，关于readystate属性的使用也将在代码1.2.2做详细说明。接下来设置ajax对象的open方法，我们使用它来建立和服务器端的连接，它有三个参数：
a.发送数据的方式，post或者get。
b.要发送的url地址。
c.数据发送方式，ture为异步，false为同步，异步的话，数据发到服务器端后，客户端的脚本就可以继续运行，不用等待服务器返回数据处理结果；false则相反，必须等到服务器返回数据后，才能继续运行客户端脚本。这个在使用时，要根据具体情况决定使用哪种方式，一般情况下使用异步方式，因为这样会提高程序的运行效率；但是假设你用for循环处理多个ajax请求时，就得考虑用同步方式了，因为每次请求时间间隔太短，不用同步方式的话，很容易出现返回的数据相互覆盖的现象。
最后是要发送的数据，使用post方式的时候，我们习惯将数据通过类似'a=some&b=other'的形式，将其ajax对象的send方法；使用get方式的时候，我们习惯将send方法的参数设置为null，取而代之的是将参数信息都放在url中，即open函数的第二个参数，形成类似'http://somesite/somepage?a=some&b=other'的形式。
好接下来看demo函数的使用，代码1.2.2中只给出了一个函数，其实它可以发生在类似下面的代码块中：
<input type="button" value="发送ajax" οnclick="sendAjax();" />
send_request函数指定了四个个参数：
a.发送数据的方式——post
b.发送的地址
c.发送的信息，我们发送了两个数据a的值为aaa，b的数据为bb
d.接收服务器端返回数据的回调匿名函数。
重点来看这个匿名函数，首先判断了ajax对象的readyState属性，readyState属性有四个值：1、2、3、4，如果它的值为4，说明服务器处理完成，返回了处理结果。那么它返回了什么信息，还有它在处理过程会不会出错呢，从而没有拿到预期数据呢？不用急，ajax对象有一个status属性，它记录服务器端处理的结果，它的值其实是HTTP协议的返回值，200代表处理成功。HTTP协议错误码比较多，在这里只列出几个常用的，404——找不到网页，500——服务器内部错误（服务器程序出错），403——没有权限。然后，我们知道服务器处理成功了，怎么拿到服务器的返回信息呢？这正是responseText所要承载的信息。
我们再来看看，服务器做了什么：
<?php //Header("Content-type: text/html;charset=utf-8"); echo '你接受到的数据：a:'.$_POST['a'].', b:'.$_POST['b'];
我们只是简单的打印了接收的数据，最后脚本的执行结果就是alert“你接收的数据：a：aaa， b:bb”。注意我在第一行注释掉了了一句话，这是因为我在html使用了utf-8编码，而js使用的默认编码也是utf-8编码，所以不需要使用转码函数，但是假设你的html使用gb2312之类的编码，就要Header("Content-type: text/html;charset=gb2312");否则js会用utf-8编码将其显示在gb2312编码的html文件上，这样就乱码了。
自定义小型ajax框架-ajax讲义二相关推荐
- Django框架（十二）-- Djang与Ajax
一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服 ...
- Asp.net Ajax框架教程
目录 (一).概述... (二).应用场景代码示例... 1).ScriptManager控件示例... 1. 在异步调用服务端注册客户端脚本新方法... 2. 捕获Ajax异步调用中 ...
- b/s模式下的即时通讯，使用ajax框架dwr实现
b/s模式下的即时通讯,使用ajax框架dwr实现 了解java的发展史可以知道,客户端编程在基于浏览器的编程方面,以前的做法是用applet实现客户端编程,在当时算是流行的做法,但是随着IE的不一致 ...
- 微软ASP.NET AJAX框架剖析
一.简介 大约在2006年年初,AJAX迅速成为Web 2.0开发中的一个热点,也成为开发以用户为中心的Web应用程序事实上的标准.然而,要开发出高质量的AJAX应用程序,首先要求开发者是一名 Jav ...
- Asp.net Ajax框架教程[教程下载]
Asp.net Ajax 框架教程 目录 (一).概述... (二).应用场景代码示例... 1).ScriptManager控件示例... 1. 在异步调用服务端注册客户端脚本新方法... ...
- 80篇各ajax框架入门教程
AJAX经典入门教程,入门实例,入门代码收藏. *VS2008 Ajax.NET快速入门教程* (2008-3-25) [本站原创]Ajax!?!入门教程之道 (2008-4-13) [本站原创]Aj ...
- AJAX框架构成设计,基于Ajax的Web框架设计与实现
摘要: 随着Web技术的发展和人们对Web使用的要求越来越高,传统的交互方式一方面使用户觉得难以使用,体验感太差,另一方面也不利于开发人员进行开发和维护.所以当Web2.0概念被提出,就立即得到了广泛 ...
- 用ASP.NET AJAX框架扩展HTML Map控件
[摘要]在本文中,我将向你展示如何使用ASP.NET AJAX框架对添加可点击的热点的HTML Map控件进行扩展.经扩展后,当我们的鼠标移动到这些热点上后,即弹出关于这些热点的详细信息;但是,这些详 ...
- 基于微软ASP.NET AJAX框架开发幻灯片播放网页
一. 简介 最近,微软ASP.NET Ajax 1.0框架以其完整的基于Ajax的web开发方案呈现在web技术人员的前面,凭借与遗留ASP.NET系统的有机整合以及完全面向对象的客户端Ja ...
- 最优秀的ajax框架 --转
毫无疑问,Ajax作为当前最火爆的技术之一,其优秀的框架层出不穷.Prototype.Dwr.Dojo.JQuery.YUi-- 都是非常出色的产品.本专题为您介绍了目前十大流行的Ajax框架及各自特 ...
最新文章
- java 内部类 抽象类_Java 内部类、匿名内部类、抽象类
- 高等学校计算机规划教程,高等学校计算机应用规划教材：计算机组成原理简明教程...
- 论文笔记:Temporal Regularized Matrix Factorization forHigh-dimensional Time Series Prediction
- Docker （1）简介
- 前端js自动填写 点击_爬虫自动填写学生健康打卡表
- sqlserver常用函数/存储过程/数据库角色
- C# Stream 和 byte[] 之间的转换(文件流的应用)
- Spring MVC Controller与jquery ajax请求处理json
- keras 微调整模型_如何围绕微服务调整团队
- 每日一题_JavaScript.利用Js操作frameset框架集对象实现购物车?
- 【.Net Framework 体积大？】不安装.net framework 也能运行！？原理补充-3
- Linux 非源码安装 xrdp
- 计算机技能高考素材,高中作文万能通用素材 2021高考必备作文素材
- C盘全面清理教程，彻底清理所有垃圾
- 公告：博客新皮肤上线啦
- QQ自定义个人文件夹
- php twig中文手册,安装 · Twig 中文文档 · 看云
- 抱薪者说 | 在Conflux玩夺宝游戏是怎样的一种体验？
- js对象是什么？js对象类型有哪些？js对象类型的总结
- 爬取中国票房网的年度票房的电影票房数据