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封装 例子 相同哈哈的更多相关文章

  1. Ajax之Jquery封装使用举例2(Json和JsonArray处理)

    本例主要使用ajax进行异步数据请求,并针对返回数据为json和jsonarray类型的数据处理. 本例中只有前端的代码,后端代码不是本文重点,故省略. 后端接口返回数据为: Json: {" ...

  2. Ajax之Jquery封装使用举例

    <html> <head> <meta charset="UTF-8"> <title>登陆页面</title> < ...

  3. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  4. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  5. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  6. Jquery封装ajax

    Jquery封装ajax   Load方法     <!-- 将jquery.js导入进来 -->     <script type="text/javascript&qu ...

  7. 模仿JQuery封装ajax功能

    需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...

  8. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  9. Jquery封装的ajax的使用过程发生的问题

    Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...

随机推荐

  1. UVa 557 (概率 递推) Burger

    题意: 有两种汉堡给2n个孩子吃,每个孩子在吃之前要抛硬币决定吃哪一种汉堡.如果只剩一种汉堡,就不用抛硬币了. 求最后两个孩子吃到同一种汉堡的概率. 分析: 可以从反面思考,求最后两个孩子吃到不同汉堡 ...

  2. BZOJ2154: Crash的数字表格

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2154 题意&&题解:http://www.cnblogs.com/jiangl ...

  3. 解析UML9种图的作用

    本文和大家重点讨论一下UML9种图的概念,UML中有五类图,共有9种图形,每种图形都有各自的特点,下面就让我们一起来看一下这些图形特点的详细介绍吧. UML9种图简介 1.用例图 说明的是谁要使用系统 ...

  4. 根据dwarfdump、Symbolicatecrash查找错误代码

    dSYM文件获取:1.build2.Archive 获取app UUID 命令:dwarfdump --uuid YourApp.app.dSYM 1.YourApp.app/YourApp2.You ...

  5. HDU 1213 How Many Tables (并查集,常规)

    并查集基本知识看:http://blog.csdn.net/dellaserss/article/details/7724401 题意:假设一张桌子可坐无限多人,小明准备邀请一些朋友来,所有有关系的朋 ...

  6. fzu 1675 The Seventy-seven Problem

    给你长度为 10^5~10^6长度,由数字组成的串 其中有4位不见了 补全该串 使得在该串能整除 77的同时 尽可能大// 先计算出每个 n*10^m 模 77 的循环节 n=0,1,2..,9// ...

  7. NYOJ-779-兰州烧饼

    [题目链接:NYOJ-779] 兰州烧饼 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 烧饼有两面,要做好一个兰州烧饼,要两面都弄热.当然,一次只能弄一个的话,效率 ...

  8. Android中利用画图类和线程画出闪烁的心形

                                                        本文讲解主要涉及的知识点: 1.线程控制 2.画图类 3.心形函数 大家先看图片: <ig ...

  9. UI特效--Android利用ViewFlipper实现屏幕切换动画效果

    .屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...

  10. Hadoop Configuration

    Configuration的主要是加载配置文件,并储存在properties中. 细节内容不重复了,主要参考Hadoop技术内幕,Hadoop源代码,以及: http://blog.csdn.net/ ...