自学-jq篇-ajax方法

ajax方法

ajax= 异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

ajax的核心

1、建立XMLHtppResquest对象

此处要注意有兼容性问题（对IE7及以下浏览器写法有不同），实现代码如下：

<script>
    var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{
        //对IE7及以下版本浏览器做兼容
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
</script>

2、通过open方法建立连接，发送请求及参数

此处用到ajax的一些方法。其实主要是open()方法。请求分为"GET"与"POST"两种形式。"GET"用来获取服务器返回的一些参数，而"POST"方法则允许用户修改服务器上的一些数据。

<script>
      /*
       *open方法解释
       *建立请求  共三个参数
       *第一个参数：使用的方法，GET  or  POST
       *第二个参数：url地址
       *第三个参数：同步方式  or  异步方式，一般置为true，为异步；默认也为异步调用
       */
       request.open("GET","changge",true);
      /*
       *send方法解释
       *发送参数，一般针对于POST方法。使用GET方法时，此参数传null或不传值
       */
     request.send(null);
</script>

3、建立响应信息

对服务器返回的状态进行判断，若成功，则拿到数据，进行后续的事宜。这里主要是对request.readyState和request.status两个属性进行判断。

request.readyState：状态码属性，枚举如下：

0：请求未初始化，open还没有调用

1：服务器连接已建立，open已调用

2：请求已接收，即收到头信息了

3：请求处理中，即接收到响应主体了

4：请求已完成，且响应已就绪，即响应完成了

request.status：状态值，比较多，例如：404 Not Found，400 请求出现语法错误。

<script>
    request.onreadystatechange = function() {
        if (request.readyState==4) {//请求完成
            if (request.status==200) { //OK  一切正常
                var data = JSON.parse(<span style="font-family: Arial, Helvetica, sans-serif;">'</span><span style="font-family: Arial, Helvetica, sans-serif;">(</span><span style="font-family: Arial, Helvetica, sans-serif;">'</span><span style="font-family: Arial, Helvetica, sans-serif;">request.responseText</span><span style="font-family: Arial, Helvetica, sans-serif;">)</span>);//将返回的数据放在data变量中
                if (data.success) { 
                    document.getElementById("XXX").innerHTML = data.msg;
                } else {
                    document.getElementById("XXX").innerHTML = "出现错误：" + data.msg;
                }
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
</script>

jQuery AJAX方法

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

load(url,data,function(response,status,xhr))

第一个参数 url ：规定请求发送到哪个地址。

第二个参数 data：可选，规定连同请求发送到服务器的数据。第三个参数function(response,statu,xhr)：可选，规定当请求完成时运行的函数。 response - 包含来自请求的结果数据 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

xhr - 包含 XMLHttpRequest 对象，readyState HTTP请求状态，responseText 响应文本，status HTTP状态码，statusText 属性用名称

这是W3School的一个例子：网址：http://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_load_data

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keyup(function(){
    txt=$("input").val();
    $("span").load("/jquery/gethint.asp",{suggest:txt},function(){alert(<span style="font-family: Arial, Helvetica, sans-serif;">"hello world</span><span style="font-family: Arial, Helvetica, sans-serif;">"</span><span style="font-family: Arial, Helvetica, sans-serif;">)});</span>
  });
});
</script>
</head>
<body>
<p>请在下面的输入框中输入名字（a 到 z 的字符）：</p>
名字：<input type="text" />
<p>建议：<span></span></p>
<p>注释：我们在 <a href="/ajax/ajax_asp_php.asp" target="_blank" rel="external nofollow"  target="_blank">AJAX 教程</a> 中讲解过本例中使用的文件（gethint.asp）。</p>
</body>
</html>

get() 方法通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

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

第一个参数 url ：规定请求发送到哪个地址。

第二个参数 data：可选，规定连同请求发送到服务器的数据。第三个参数success(response,status,xhr)：可选，规定当请求成功时运行的函数。

第四个函数dataType：可选，规定预计的服务器响应的数据类型，默认情况，JQ将智能判断。

$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

post() 方法通过 HTTP POST 请求从服务器载入数据。

$(selector).post(url,data,success(response,status,xhr),dataType)

第一个参数 url ：规定请求发送到哪个地址。

第二个参数 data：可选，规定连同请求发送到服务器的数据。第三个参数success(response,status,xhr)：可选，规定当请求成功时运行的函数。

第四个函数dataType：可选，规定预计的服务器响应的数据类型，默认情况，JQ将智能判断。

$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

$ajax()方法

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

1.url:

要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:

要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:

要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:

要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:

要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:

要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:

要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

json：返回JSON数据。

jsonp：JSONP格式。使用jSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

8.beforeSend：

要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

function(XMLHttpRequest){

this; //调用本次ajax请求时传递的options参数

}

9.complete：

要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatus){

this; //调用本次ajax请求时传递的options参数

}

10.success：

要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

(1)由服务器返回，并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //调用本次ajax请求时传递的options参数

}

11.error:

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

function(XMLHttpRequest, textStatus, errorThrown){

//通常情况下textStatus和errorThrown只有其中一个包含信息

this; //调用本次ajax请求时传递的options参数

}

12.contentType：

要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){

//返回处理后的数据

return data;

}

14.dataFilter：

function(data, type){

//返回处理后的数据

return data;

}

15.global：

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified：

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username：

要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21.scriptCharset：

要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

jQuery.getJSON()函数用于通过HTTP GET形式的AJAX请求获取远程JSON编码的数据。

jQuery.getJSON( url [, data ] [, success ] )

第一个参数 url ：规定请求发送到哪个地址。

第二个参数 data：可选，规定连同请求发送到服务器的数据。第三个参数success：可选，请求成功时执行的回调函数。它有3个参数：其一是请求返回的数据，其二是请求状态文本(例如"success"、 "notmodified")，

jQuery.getJSON(url, data, success);

// 等价于

$.ajax({
 url: url,
 type: "GET",
 data: data,
 success: success,
 dataType: "json"
});

例子：

// 获取"/action.php?m=list&page=2&size=10"的JSON数据，获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){

    // 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
    // jQuery将获取的JSON格式数据转换为JS数组
    for(var i in data){
        var obj = data[i];
        alert( obj.title );
    }

} );

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

jQuery.getScript(url,success(response,status))

第一个参数 url ：规定请求发送到哪个地址。

第二个参数success(response,status)：

可选。规定请求成功后执行的回调函数。额外的参数：response - 包含来自请求的结果数据，status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

加载并执行 test.js ，成功后显示信息：

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

$().load(url,data,callback)	把远程数据加载到被选的元素中
$.ajax(options)	把远程数据加载到XMLHttpRequest 对象中
$.get(url,data,callback,type) $.post(url,data,callback,type)	使用HTTP GET 来加载远程数据
$.getJSON(url,data,callback)	使用HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	加载并执行远程的JavaScript 文件

自学-jq篇-ajax方法

继续阅读

Spring MVC+Ajax创建实例

jquery,ajax,jsonp例子+springmvc后台

SpringMVC(六) | 前后端交互之ajax与jsonjsonajax

SpringMVC之ajax异步交互

SpringMvc与前端交互的数据转递（ajax）一、text类型数据二、json类型数据

PHP基础入门，简单实现前端后端交互<?php?>、echo变量及区分单双引号创建数组、echo、print_r()、var_dump()区别二维数组常见数据类型及调用函数自定义函数http协议常用请求方式及在php中的用法网页和服务器简单交互案例

jqGrid的使用笔记：5. 事件

JSON的三种解析方式JSON的三种解析方式一、什么是JSON？二、JSON解析之传统的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON总结：

django短信验证码的后端实现

jQuery实现百度搜索框

前后端分离之跨域问题

2010年终总结--技术篇

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

JQuery--dom捕获html元素

jquery_126_demo