ajax 源生,jquery封装 例子 相同哈哈
http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22
ajax使用回调函数的例子(原生代码和jquery代码)
一、 ajax代码存在的问题(异步交互的问题)
ajax所请求的url,如果因为网络等问题,很久没有回应,则给用户造成“假死”的现象。
代码如下:
xmlHttp = GetXmlHttpObject();
xmlHttp.open();
xmlHttp.send();
//下面这句,会一直等待,直到有返回值
alert(xmlHttp.responseText);
二、 ajax代码异步交互的解决方式
1. Javascript原生ajax代码
先创建xmlhttp对象,然后执行open和send,通过xmlHttp.onreadystatechange = stateChanged回调函数来处理返回值。
readyState== 0 //尚未加载
readyState== 1 //正在加载
readyState== 2 //加载完毕
readyState== 3 //正在处理
readyState== 4 //处理完毕
<script type="text/javascript" >
//创建ajax
function testAjax(){
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null){
alert("浏览器不支持");
return;
}
var url = "http://www.qq.com";
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send();
//document.getElementById("txt").innerHTML=xmlHttp.responseText;
}
//创建不同的ajax对象
function GetXmlHttpObject(){
var xmlHttp = null;
try{
//firefox opera safari
xmlHttp = new XMLHttpRequest();
}catch (e){
//ie
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//监控状态
function stateChanged()
{
if (xmlHttp.readyState==4)
{
//document.getElementById("txt").innerHTML=xmlHttp.responseText;
alert(xmlHttp.responseText);
}
}
</script>
2. jquery中ajax的写法
(1)Post写法
var txt = $("input").val();//换的某个输入框的value
//使用post方法,传输值为suggest=txt,绑定回调函数
$.post("test.html", {suggest:txt}, function(result){
$("#div").html(result);
});
(2)Get写法
var txt = $("input").val();//换的某个输入框的value
//使用get方法,传输值为suggest=txt,绑定回调函数
$.get("test.html", {suggest:txt}, function(result){
$("#div").html(result);
});
(3)ajax写法(通过http请求)
$.ajax({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
},
error: function(){
//请求出错处理
}
});
ajax 源生,jquery封装 例子 相同哈哈的更多相关文章
- Ajax之Jquery封装使用举例2(Json和JsonArray处理)
本例主要使用ajax进行异步数据请求,并针对返回数据为json和jsonarray类型的数据处理. 本例中只有前端的代码,后端代码不是本文重点,故省略. 后端接口返回数据为: Json: {" ...
- Ajax之Jquery封装使用举例
<html> <head> <meta charset="UTF-8"> <title>登陆页面</title> < ...
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- jQuery Ajax 二次封装
jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- Jquery封装ajax
Jquery封装ajax Load方法 <!-- 将jquery.js导入进来 --> <script type="text/javascript&qu ...
- 模仿JQuery封装ajax功能
需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
- jQuery 封装的ajax
jquery封装的ajax 具体操作: $.get(url [,data] [,fn回调函数] [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...
- Jquery封装的ajax的使用过程发生的问题
Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...
随机推荐
- UVa 11400 Lighting System Design
题意: 一共有n种灯泡,不同种类的灯泡必须用不同种电源,但同一种灯泡可以用同一种电源.每种灯泡有四个参数: 电压值V.电源费用K.每个灯泡的费用C.所需该种灯泡的数量L 为了省钱,可以用电压高的灯泡来 ...
- Java Web编程的主要组件技术——JDBC
参考书籍:<J2EE开源编程精要15讲> JDBC(Java DataBase Connectivity)是Java Web应用程序开发的最主要API之一.当向数据库查询数据时,Java应 ...
- apache开源项目 -- Tuscany
tuscany是Apache组织关于SOA实现的一个开放源码的工程项目,目前处于孵化期阶段. 该项目主要基于SCA,SDO,DAS等技术上实现的. SCA 的基本概念以及 SCA 规范的具体内容并不在 ...
- vim - 查找替换
:%s/\<key_word_replaced\>/word_you_want_to_say/g
- c & c++中static的总结
static 修饰的三种作用 (1) 静态局部变量 (2) 模块内的全局变量.函数,不可以被其他模块访问 (3) 类的静态成员 其中(3)只在c++中有. (1) 静态局部变量.局部变量一般在函数体内 ...
- mkswap 把一个分区格式化成为swap交换区
mkswap /dev/sda* //创建此分区为swap 交换分区swapon /dev/sda* //加载交换分区swapoff /dev/sda* //关闭交换分区: 若想要开机自动挂载:vi ...
- 转载RabbitMQ入门(6)--远程调用
远程过程调用(RPC) (使用Java客户端) 在指南的第二部分,我们学习了如何使用工作队列将耗时的任务分布到多个工作者中. 但是假如我们需要调用远端计算机的函数,等待结果呢?好吧,这又是另一个故事了 ...
- 多线程程序设计学习(2)之single threaded execution pattern
Single Threaded Execution Pattern[独木桥模式] 一:single threaded execution pattern的参与者--->SharedResourc ...
- NPlot开源画图类
一.net下的图表控件NPlot的基本用法 NPlot的基本用法 图表控件一直是很难找的,特别是免费又强大的.NPlot是一款非常难得的.Net平台下的图表控件,能做各种曲线图,柱状图,饼图,散 ...
- Metaspace 之一--java8 去掉 perm 用 Metaspace 来替代
正如大家所知,JDK 8 Early Access版已经提供下载.这使开发者可以体验Java8的新特性.其中之一,是Oracle从JDK7发布以来就一直宣称的要完全移除永久代空间.例如,字符串内部池, ...