What [Web front-end] 030 AJAX is

What is AJAX

1. AJAX is an "art"

• general speaking
  • Art AJAX is to exchange data with the server without reloading the entire page and update parts of the page
• Online had this to say
  • Asynchronous JavaScript and AJAX refers to XML (Asynchronous JavaScript And XML)
  • AJAX is a promotion by Google in 2005 to open the programming mode
  • AJAX is not a new programming language, but a new method of using the existing standard
  • By AJAX, you can create better, faster and more user-friendly WEB application
  • AJAX and JavaScript-based HTTP request (HTTP Requests)
  • HTTP request remote data loading

• When the underlying jQuery AJAX implementation of the package, which allows us to operate during AJAX, do not like that complicated native JS

• $.get(), $.post(), $.ajax()
  • Returns the XMLHttpRequest object that it created
  • In most cases we do not need to manipulate objects returned

2. How to use AJAX technology

• First of all, you must have a Web server, such as, able to execute Python and HTML browser

• note:
  • Before writing the HTML, directly in the browser opens, use the file protocol
  • AJAX is based on the HTTP request, it is necessary to HTML using the HTTP protocol can be opened
  • If you can use the HTTP protocol to open the HTML, and the normal display, it means to build a successful Web server

2.1 $ .get () method

/* 发送 ajax 请求
1. url
2. 可选
    发送 get 请求时携带的参数
3. 可选
    回调函数，请求完之后做什么事
4. 可选
    返回的数据类型 json
*/ 

$.get(url, {请求的参数}, function(data){}, "json");

2.2 $.post()

$.post(url, {请求的参数}, function(data){}, "json");

2.3 $.ajax()

$.ajax({
    url:"/cgi-bin/5.py",                // 当前请求的 url 地址
    type:"get",                         // 当前请求的方式 get 或 post
    data:{id:100,username:"zhangsan"},  // 请求时发送的参数
    dataType:"json",                    // 返回的数据类型
    success:function(data){             // ajax 请求成功后执行的代码
        console.log(data);
    },
    error:function(){                   // ajax 执行失败后执行的代码
        alert("ajax 执行错误");
    },
    timeout:2000,                       // 设置当前请求的超时时间毫秒，必须是异步请求才会生效
    async:true                          // 是否异步，true 为异步，false 为同步
});

2.4 AJAX asynchronous and synchronous

/* 设置 ajax 的全局配置
    async:false 设置当前请求为同步
*/
$.ajaxSetup({
    async:false
});

• The default is asynchronous AJAX request

• async (default: true)
  • By default setting, all requests are asynchronous request, it is generally not necessary to write this sentence
  • If you need to send a synchronization request, the need to set this option to false

• Synchronous request, send AJAX requests sent out after it must wait for the result, after returning to continue down

• In general, use the asynchronous operation on the line

• Unless there are special circumstances, such as AJAX have to wait for the results returned after treatment can do, only with synchronous

3. Note

1. AJAX is no refresh request to the server, so we do not feel, do not see the AJAX requests and specific implementation in the browser, so we need to use debugging tools browser F12to view it

2. AJAX request based on the HTTP protocol, which requires the use of the HTTP protocol when opening the HTML with AJAX

3. Data regarding the type of return
   • get (), post (), ajax () can return a set of data type "json"
   • If asked to return json format data, then it must return json
   • If no match is returned in the format provided
     • get and post methods will not get returned data DATA
     • AJAX method will take the error function
4. Back json format data in Python
   • Json module introduced
   • json.dumps (data), using the method json_dumps json format transcoding

5. AJAX approach will create an object XMLHttpRequest; used in the AJAX method $ (this) on behalf of AJAX object

4. Learn JSON format data

• JSON is JavaScript Object Notation first letter abbreviation
• JS meaning of the word Object Notation
• Here that means that JSON object similar to a data format JS
• This data is currently more popular format, gradually replace the traditional XML data format

4.1 JS object literal

var tom = {
    name:'tom',
    age:18
};

4.2 JSON data format

{
    "name":'tom',
    "age":18
}

• Object with JSON (JS object) is different, the property name data format JSON need double quotes, with or without single quotation marks will result in data read errors

• Another JSON format is a data array, and the array of literals in the same JS

['tom', 18, 'programmer']