Ajax用法总结

ajax:

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。(来自百度百科)。

Ajax快速入门:

1.创建XMLHttpRequest对象

2.将状态触发器绑定到一个函数

3.使用open方法建立与服务器的连接

4.向服务器端发送数据

5.在回调函数中对返回数据进行处理

1.创建XMLHttpRequest对象:

不同浏览器提供不同的支持,IE浏览器 new ActiveXObject("Msxml2.XMLHTTP"),new new ActiveXObject("Microsoft.XMLHTTP"),其它浏览器(火狐) new XMLHttpRequest();

XMLHttpRequest的方法:

open(method,url, asynch) :建立对服务器的调用

send(content) :向服务器发送请求

XMLHttpRequest的属性:

    onreadystatechange :状态回调函数

    responseText/responseXML :服务器的响应字符串

    status:服务器返回的HTTP状态码(200 =请求成功;404=请求失败......)

    statusText: 服务器返回的HTTP状态信息

    readyState :对象状态(0 = 未初始化;1 = 正在加载;2 = 已加载;3 = 交互中;4 = 完成)

一般都只用找到文档上代码复制代码就OK:

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.将状态触发器绑定到一个函数:

xmlHttp.onreadystatechange = processor; 这里的processor是回调函数的方法名,当对象状态发生改变时,就会触发回调函数,触发回调函数这里当做最后一步。

xmlHttp.onreadystatechange = processor; function processor (){
      … …
 }

3.使用open方法建立与服务器的连接:

open(method,url, asynch) 其中method表示HTTP调用方法,一般使用"GET","POST"; url表示调用的服务器的地址 ; asynch表示是否采用异步方式,true表示异步,一般这个参数不写。

xmlHttp.open("POST", "url");
xmlHttp.open("GET", "url?name=xxx&pwd=xxx");//get提交方式,url后面可以带参数,post提交方式参数放在接下来要讲的send方法里面

 4.向服务器端发送数据:

        用get提交方式:

//3.使用open方法建立与服务器的连接
xmlhttp.open("GET","url?name=xxx&pwd=xxx"); //4.发送请求 send xmlhttp.send(null);

用post提交方式:

//3.使用open方法建立与服务器的连接
xmlhttp.open("POST",URL);    

xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置请求头,这个在post提交方法中要多写的代码    

//4.发送请求
xmlhttp.send("name=xxx&pwd=xxx");

5.在回调函数中对返回数据进行处理:

//2.将状态触发器绑定到一个函数xmlhttp.onreadystatechange= processor;

 function  processor(){       //5.处理响应数据 当信息全部返回,并且是成功       if(xmlhttp.readyState==4&&xmlhttp.status==200){                    } };

一个完整的例子:

    //第一步:得到XMLHttpRequest对象.
    var xmlhttp = null;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest(); //针对于现在的浏览器包括IE7以上版本
    } else if (window.ActiveXObject) {
        //针对于IE5,IE6版本
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.设置回调函数
    xmlhttp.onreadystatechange=function(){

        //5.处理响应数据  当信息全部返回,并且是成功
        if(xmlhttp.readyState==4&&xmlhttp.status==200){

            alert(xmlhttp.responseText);
        }
    };

    //3.open
    xmlhttp.open("GET",URL);

    //4.发送请求 send
    xmlhttp.send(null);
时间: 2024-10-11 17:38:24

Ajax用法总结的相关文章

jQuery中的ajax用法案例

什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本

jQuery $.post $.ajax用法

jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示. callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法). type (Stri

[ASP.NET]JQuery AJAX用法整理

摘要:[ASP.NET]JQuery AJAX用法整理 我们再用Jquery CallBack Server时有许多参数要如何使用 $.ajax({ type: "POST", url: "MyWebService.asmx/SayHelloJson", data: "{ firstName: 'Aidy', lastName: 'F' }", contentType: "application/json; charset=utf-8&

Ajax用法与区别

上一次复习了XMLHttpRequest对象,这一次要总结一下Ajax的其他几个对象,以及各个版本的Ajax用法和区别. FormDate 现在Web中大家都会用到表单的数据序列化,XMLHttpRequest也提供了一个叫做FormData类型: var data=new FormData(); data.append("name","张三"); data.append("age","14"); alert(data.get

Ajax 用法

var total=100;                 var orderName='sssss';                 var orderDescrib='dddd';                 var pair2 = new NameValuePair("total", total);                 var pair3 = new NameValuePair("orderName", orderName);       

jQuery Ajax用法详解

[详解]jquery  ajax在web应用开发中常用,主要包括有ajax,get,post,load,getscript等这几种常用无刷新操作方法,下面来给大家介绍一下.我们首先先从最简单的方法看起. 我们先从最简单的方法看起,处理复杂的ajax请求时,jquery使用jquery.ajax()方法进行处理,在jquery中有一些简单的方法,他对jquery.ajax()方法进行了封装,是的我们在处理一些简单的ajax事件时,不需要使用jquery.ajax()方法,其中有些方法在之前的文章已

jQuery学习之jQuery Ajax用法详解

[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQue jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起,处理复杂的ajax请求时,jQuer

原生和jQuery的ajax用法

jQuery的ajax方法: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) consol

jQuery Ajax用法

jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理.在jQuery中有一些简单的方法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法在之前的文章中已经出现过了,相信大家很快便

AJAX用法

html: $.ajax({ type: "POST", data:{order_id:'123456'}, url: "order.php?act=yhc_package", dataType: "json", async:false, success:function(res){ alert(res.content); if (res) { alert('sucess'); } else { alert('订单列表里有的没有入库,无法合包操作