ajax常用实例代码总结新手向参考(一)

http的交互方法有四种：get、post、put(增加数据)、delete(删除数据)

put和delete实现用的是get和post

 

get方式

页面不能被修改，只是获取查询信息。但是提交的数据会通过链接暴露在外，使用get请求会被人拿到登陆的用户名和密码，url长度有限制

post方式

页面可以修改，比如回帖、评论。但是提交的数据不会暴露在外，url长度无限制，但是提交大小会有限制

默认不被缓存，不在同一个请求域下远程请求，post都会被转为get

 

推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》

dataType:string

响应的数据类型主要是mime信息，不填写的话会智能判断。一般MIME（多功能网际邮件扩充协议）被定义在Content-Type header中。

一般包括有：xml、html、script、json、jsonp、text

 

$.ajax，$.get/$.post

$.ajax:执行异步复杂的请求，如果不需要在出错时执行可以用$.get或$.post替代

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

jQuery.get(url,data,success(response,status,xhr),dataType)

url（必需，其他为可选）:要发送的url

data：数据

success：成功时的操作

success(data, textStatus, jqXHR)：（处理后的数据、请求状态字符串、jq1.4中xhr对象）

dataType：响应的数据类型

实例：

var loginFn=function(){
  $.ajax({
      type:'post',            //String 默认为GET
      timeout:'',        //Number 设置超时时间（毫秒）
      url:{"url"},            //String 发送请求的地址
      dataType:"json",        //String xml、html、script、json、jsonp、jQuery、text
      data:{'ur;':url},
      //或者data可以如以下写法
      data:{username:$("#username").val(),content:$("#content").val()},
//GET请求中将附在URL后；对象必须为key/value形式。如果是数组，jQuery将自动为不同值对应同一名称例如：{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2
  //提交前回调函数（发送请求前可以修改XMLHttpRequest对象的函数）
      beforeSend:function(XMLHttpRequest){
          this;   //调用本次Ajax请求时传递的options参数
      },
      //请求成功后处理（data可能是xmlDoc、jsonObj、html、text；textStatus
（请求状态）：success、error、notimodified、timeout）
      success:function(data,textStatus){
          this;   //调用本次Ajax请求时传递的options参数//window.location.href = data.getCodeUrl;/*location.reload();*/
      },
      //请求失败后处理（通常情况下textStatus和errorThrown只有其中一个包含信息）
      error: function (XMLHttpRequest,textStatus,errorThrown) {
          this;   //调用本次Ajax请求时传递的options参数
          console.log("error-----------");
      },
      //请求完成后处理（请求成功或失败时均调用）
      complete:function(XMLHttpRequest,textStatus){
          this;   //调用本次Ajax请求时传递的options参数
      }
  });
}

$("#object").on("click",loginFn);

接上，success扩展：

success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();

$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}

load：请求加载数据并返回到指定位置。一般为常用为：点击或输入文本框在指定位置加载出文本，

如果提供数据的是方法，得用post或者get才能生效

实例：

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

 

浏览器兼容

function() getXhr{
    var xhr;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();//非ie浏览器
    }else{
        xhr=new ActiveXobject('Microsoft.XMLHttp');//ie浏览器
    }
}

/*保证返回内容包含text/html,超文本文件
 * MIME（多功能网际邮件扩充协议）
 * 被定义在Content-Type header中

*常用的有：

超文本标记语言文本 .html,.html text/html 
普通文本 .txt text/plain 
RTF文本 .rtf application/rtf 
GIF图形 .gif image/gif 
 * */

  xhr.overrideMimeType('text/html'); 


 

var xhr =new XMLHttpRequest();

→类似于jq的$.ajax

xhr.open("get/post","/*/*/url",true);

→类似于jq的type,url,async

xhr.responseType="text"/"blob"/"json";

→类似于jq的dataType

xhr.send();

→类似于jq的success

 

 

 推荐参考：原生和jQuery的ajax用法

推荐参考精华：AJAX(用法总结-精华版)

JQuery中的AJAX详解

javascript教程ajax

Ajax小实例验证登录框---经验总结

使用jquery简化ajax的开发