Ajax summary

①Definition: AJAX is a technology for quickly creating dynamic web pages

If a traditional web page needs to update the content, the entire web page must be reloaded, while ajax can make the web page update asynchronously by exchanging a small amount of data with the server in the background. This means that parts of a page can be updated without reloading the entire page

(doesn't require any browser plugin, but requires the user to allow javascript to execute on the browser)

② Partial update practical examples: There are many application cases using AJAX: Sina Weibo, Google Maps, and qq likes.

③ When sending a request to the server, it is necessary to specify: specify the type of request, URL and specific data data

method : the type of request is GET or POST (pages read through POST are not cached)

Difference: (1) Get is a request to the server for data, while Post is a request to submit data to the server

　　(2) The data requested by the GET method will be cached by the browser, so others can read the data, such as account and password, from the browser's history. In some cases, the GET method will bring serious security problems, and the POST method can relatively avoid these problems

So GET requests are often used when searching (for example, when modern browsers search for information, the content you search for will be appended to the URL), while POST requests are often used when modifying user password privacy information.

data: the data sent to the server

Note: If not a string, it will be automatically converted to string format. GET requests will be appended to the url. Object must be in key/value format

url: The address of the file on the server, which can be any type of file, such as .txt, or a server script file, such as .php (the file can be executed on the server before returning a response)

js: bind and process all data;

DOM: achieve dynamic display and interaction

④Server response: The callback function after the request is successful, there are two parameters

(1) The data returned by the server and processed according to the dataType parameter

(2) A string describing the state

function(data) {
　　//data may be html, text, etc.
　　this;//The options parameter passed when calling this Ajax request
}

⑤jQuery ajax post例子：

 $(document).ready(function(){
   $.ajax({
            //提交数据的类型 POST/GET
            type:"POST",
            //提交的网址
            url:"add",
            //提交的数据
            data:{name:"name"},
            //成功返回之后调用的函数            
            success:function(data){
                 $(".add:focus").siblings('.num').text(data)  //接受返回数据反映到页面         
             }
            //调用出错执行的函数
            error: function(){
                //请求出错处理
             }        
         });
});
//url (String) 请求的HTML页的URL地址
//data (Map)(可选参数) 发送至服务器的 key/value 数据

在jquery的ajax函数中，可以传入3种类型的数据

(1)文本(2)json对象(3)json数组

⑥dataType类型：

指定返回的数据类型。该属性值可以为：
xml:返回XML文档，可使用jQuery进行处理
html: 返回HTML字符串
script: 返回JavaScript代码，不会自动缓存结果。除非设置了cache参数
json: 返回JSON数据，JSON数据将使用语法进行解析(属性名必须加双引号，所有字符串也必须用双引号)，如果解析失败将抛出一个错误。从jQuery 1.9开始，空内容的响应将返回null或{}
text: 返回纯文本字符串

Guess you like