jQuery_Ajax详解

jQuery其实就是一个JavaScript的类库，其将复杂的功能做了上层封装，使得开发者可以在其基础上写更少的代码实现更多的功能。

jQuery 不是生产者，而是大自然搬运工。
jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

注：2.+版本不再支持IE9以下的浏览器

jQuery.get(...)

所有参数：

url: 待载入页面的URL地址

data: 待发送 Key/value 参数。

success: 载入成功时回调函数。

dataType: 返回内容格式，xml,json, script,text,html

jQuery.post(...)

所有参数：

url: 待载入页面的URL地址

data: 待发送 Key/value 参数

success: 载入成功时回调函数

dataType: 返回内容格式，xml,html

jQuery.getJSON(...)

所有参数：

url: 待载入页面的URL地址

data: 待发送 Key/value 参数。

success: 载入成功时回调函数。

jQuery.getScript(...)

所有参数：

url: 待载入页面的URL地址

data: 待发送 Key/value 参数。

success: 载入成功时回调函数。

jQuery.ajax(...)

部分参数：

url：请求地址

type：请求方式，GET、POST（1.9.0之后用method）

headers：请求头

data：要发送的数据

contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")

async：是否异步

timeout：设置请求超时时间（毫秒）

beforeSend：发送请求前执行的函数(全局)

complete：完成之后执行的回调函数(全局)

success：成功之后执行的回调函数(全局)

error：失败之后执行的回调函数(全局)

accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型

dataType：将服务器端返回的数据转换成指定类型

"xml": 将服务器端返回的内容转换成xml格式

"text": 将服务器端返回的内容转换成普通文本格式

"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。

"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式

"json": 将服务器端返回的内容转换成相应的JavaScript对象

"jsonp": JSONP 格式

使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型

(an XML MIME type will yield XML,in 1.4 JSON will yield a JavaScript object,in 1.4 script willexecute the script,and anything else will be returned as a string

converters：转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数

$.ajax({
						  accepts: {
							mycustomtype: 'application/x-some-custom-type'
						  },  
						  // Expect a `mycustomtype` back from server
						  dataType: 'mycustomtype'

						  // Instructions for how to deserialize a `mycustomtype`
						  converters: {
							'text mycustomtype': function(result) {
							  // Do Stuff
							  return newresult;
							}
						  },});

jQuery Ajax Demo代码示例：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
    </p>


    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>

        function JqSendRequest(){
            $.ajax({
                url: "http://c2.com:8000/test/",                type: 'GET',                dataType: 'text',                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }


    </script>
</body>
</html>

jQuery_Ajax详解

相关文章