AJAX

2018-07-07 本文已影响0人 Cicada丶

GET vs. POST

GET请求应该只是读操作，POST才应该是对服务端写操作

数据类型Data Type

Data Type用于指定请求的返回类型

text 传输简单的字符串
html 传输html文本，设置为这种类型，浏览器会自动识别
script 在页面上添加一段该脚本
json 返回json字符串
jsonp 从另外一个域名传json数据
xml 传xml数据

异步

ajax是浏览器异步调用的，发出请求时会挂起该调用，继续执行后续代码，当请求响应时再在主线程执行
剩余代码(JavaScript是单线程的，浏览器是多线程的)

$.get( "foo.php", function( response ) {
    console.log( response ); // server response
});

同源规则

Ajax请求仅限于与发出请求的页面相同的协议(http或https)、相同的端口和相同的域。这个限制不适用于通过jQuery的Ajax方法加载的脚本。
InternetExplorer10以下不支持跨域Ajax请求
另一个例外是针对另一个域上的JSONP服务的请求。对于JSONP，服务提供者已同意使用一个脚本响应您的请求，该脚本可以使用<script>标记，从而避免了相同的起源限制；该脚本将包含您请求的数据，并封装在您提供的回调函数中。

$.ajax()

// Using the core $.ajax() method
$.ajax({
 
    // The URL for the request
    url: "post.php",
 
    // The data to send (will be converted to a query string)
    data: {
        id: 123
    },
 
    // Whether this is a POST or GET request
    type: "GET",
 
    // The type of data we expect back
    dataType : "json",
})
  // Code to run if the request succeeds (is done);
  // The response is passed to the function
  .done(function( json ) {
     $( "<h1>" ).text( json.title ).appendTo( "body" );
     $( "<div class=\"content\">").html( json.html ).appendTo( "body" );
  })
  // Code to run if the request fails; the raw request and
  // status codes are passed to the function
  .fail(function( xhr, status, errorThrown ) {
    alert( "Sorry, there was a problem!" );
    console.log( "Error: " + errorThrown );
    console.log( "Status: " + status );
    console.dir( xhr );
  })
  // Code to run regardless of success or failure;
  .always(function( xhr, status ) {
    alert( "The request is complete!" );
  });

注：关于dataType设置，如果服务器发回的数据格式与您指定的格式不同，您的代码可能会失败，原因并不总是明确的，因为HTTP响应代码不会显示错误。在处理Ajax请求时，请确保服务器正在发回所要求的数据类型，并验证Content-type标头对于数据类型是准确的。例如，对于JSON数据，Content-type标题应该是application/json.

常用的几个配置属性

async

设为false如果请求应该同步发送。默认为true。注意，如果将此选项设置为false，您的请求将阻止其他代码
的执行，直到收到响应为止。

cache

除了script和jsonp类型都是默认为true，表示缓存响应数据，在一段时间内发送相同url请求时会直接从
缓存中拿数据

done

如果请求成功，要运行的回调函数。函数接收响应数据(如果dataType是JSON)，以及请求和原始请求对象
的文本状态。

fail

请求失败的时候回调的函数，接受原请求对象和响应状态码

always

无论失败成功都会执行，接受原请求对象和响应状态码

context

指定回调方法运行在哪个域中，默认是this

data

指定要发送给服务端的数据，比如get请求则是foo=bar&baz=bim
json类型需要对数据对象进行转换JSON.stringify(xxx)

contentType

contentType: 发送信息至服务器时内容编码类型，简单说告诉服务器请求类型的数据
默认值: "application/x-www-form-urlencoded"

dataType

设置需要响应的数据类型，如果不一致会回调失败

jsonp

设置响应回调名称?

timeout

最长等待响应时间

type

请求类型，get、post。可以是put和delete，但不是所有浏览器都支持

请求的地址，是ajax()方法的唯一必选属性

封装了ajax()方法的简便方法

$.fn.load

.load()方法在jQuery的Ajax方法中是唯一的，因为它是对选择调用的。大.load()方法从URL中获取
HTML，并使用返回的HTML填充所选元素。除了向方法提供URL之外，还可以选择提供一个选择器；jQuery
将只从返回的HTML中获取匹配的内容。

// Using .load() to populate an element based on a selector
$( "#newContent" ).load( "/foo.html #myDiv h1:first", function( html ) {
    alert( "Content updated!" );
});

序列化

serialize() //将表单序列化为查询字符串

// Turning form data into a query string
$( "#myForm" ).serialize();
 
// Creates a query string like this:
// field_1=something&field2=somethingElse

.serializeArray() 将对象数组序列化为数组对象字符串

// Creating an array of objects containing form data
$( "#myForm" ).serializeArray();
 
// Creates a structure like this:
// [
//   {
//     name : "field_1",
//     value : "something"
//   },
//   {
//     name : "field_2",
//     value : "somethingElse"
//   }
// ]

js对象转换为json字符串

JSON.stringify(obj);

json字符串转换为js对象

JSON.parse(str);

表单校验

注册表单提交时回调事件

// Using validation to check for the presence of an input
$( "#form" ).submit(function( event ) {
 
    // If .required's value's length is zero
    if ( $( ".required" ).val().length === 0 ) {
 
        // Usually show some kind of error message here
 
        // Prevent the form from submitting
        event.preventDefault();
    } else {
 
        // Run $.ajax() here
    }
});

都可以用on函数代替

$("#form").on("submit",function (event) {
    event.preventDefault();
});

结合正则表达式

// Validate a phone number field
$( "#form" ).submit(function( event ) {
    var inputtedPhoneNumber = $( "#phone" ).val();
 
    // Match only numbers
    var phoneNumberRegex = /^\d*$/;
 
    // If the phone number doesn't match the regex
    if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
 
        // Usually show some kind of error message here
 
        // Prevent the form from submitting
        event.preventDefault();
    } else {
 
        // Run $.ajax() here
    }
});

Jquery预过滤

- 当跨域的时候设置为代理
// Using a proxy with a prefilter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    if ( options.crossDomain ) {
        options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
        options.crossDomain = false;
    }
});

Ajax事件

全局监听，多用于document

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });

某一个标签监听

// Setting up a loading indicator using Ajax Events
$( "#loading_indicator" )
    .ajaxStart(function() {
        $( this ).show();
    })
    .ajaxStop(function() {
        $( this ).hide();
    });

所有回调列表

ajaxStart (Global Event)
beforeSend (Local Event)
ajaxSend (Global Event)
success (Local Event)
ajaxSuccess (Global Event)
error (Local Event)
ajaxError (Global Event)
complete (Local Event)
ajaxComplete (Global Event)
ajaxStop (Global Event)

参考http://api.jquery.com/Ajax_Events/

AJAX

GET vs. POST

数据类型Data Type

异步

同源规则

$.ajax()

常用的几个配置属性

封装了ajax()方法的简便方法

$.fn.load

序列化

表单校验

Jquery预过滤

Ajax事件

猜你喜欢

热点阅读