Home > Article > Web Front-end > Ajax commonly used functions

Ajax commonly used functions

巴扎黑Original: 2017-07-18 16:37:371616browse

AJAX is a technology that can update part of a web page without reloading the entire web page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

For traditional web pages (not using AJAX), if the content needs to be updated, the entire web page must be reloaded.

There are many application cases using AJAX: Sina Weibo, Google Maps, Kaixin.com, etc.

2: Traditional Ajax is too cumbersome. jquer encapsulates some simple functions commonly used in ajax.

a: $.ajax() method:

jsp page code:

<head><title>Ajax验证</title><script type="text/javascript" src="js/jquery-1.8.3.min.js?1.1.11"></script><script type="text/javascript">$(function () {
            $("[name='userName']").blur(function () {         
                $.ajax({
                    type: "post",
                    url: "/TestServlet",
                    data:{action:"login"},         //data 传递的参数一般都是key：“ value” 类型的  value一定要加引号  我亲身体验  那种找不到错的感觉// dataType:'Text',            //servers 返回的格式  也可以是gjon                    success: function (data) {if (data == "success") {
                            alert(data);
                            $("#myspan").html(data);
                        }
                    },
                    error: function () {           //这个用的比较少                    }
                })
            })
        })</script></head><body> 姓名： <input  name="userName" type="text"><span id="myspan"></span> 密码: <input name="password" type="text"></body>

Servlet background code:

public class TestServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("action");
        System.out.println(name);if(name.equals("login")){
            response.getWriter().write("success");   //返回回掉函数的参数
        }else{
            response.getWriter().write("file");
        }
    }

b: $.get(), $.post() and $.getJson methods are all streamlined versions of the $.ajax() method, and their usage is roughly the same , one type

is missing

$.post("/TestServlet",
                  {"uname":$('[name=uname]').val()},
                  function (data) {
                      alert(data);
                  });

c: $.load()

 $("#msg").load(           "/TestServlet","action="+$('[name="userName"]'

d:$(selector).serializeArray() and $(selector).serialize()

/ /This method can directly obtain the name attribute value of the form form as the data parameter

 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json                     $.each(data1,function (i,dom) {
                         alert(dom.name+"\r\n"+dom.value);
                     });

                     var data2=$("#form1").serialize();
                     alert(data2);

e: as the data parameter

 var data2=$("#form1").serialize();
                     $.getJSON("/TestServlet",data2, function (data) {
                            alert(data);
                     });

Four common request methods for ajax in jQuery:
1.$.ajax() returns the XMLHttpRequest object it created.
$.ajax() has only one parameter: parameter key/value object, including each configuration and callback function information. If the dataType option is specified, make sure the server returns the correct MIME information (e.g. xml returns "text/xml").
Example:
Save data to the server and display information when successful.
$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, success: function (data) 　{
if (data != "") {
$("#pager").pager({
pagenumber: pagenumber, pagecount: data.split("$$")[1],
buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2. Through remote HTTP GET request Load information.
This is a simple GET request function to replace the complex $.ajax. The callback function
can be called when the request is successful. If you need to execute a function on error, use $.ajax. Example:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data) ;
});
3. Load information via remote HTTP POST request. This is a simple POST request function to replace the complex $.ajax.
The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.
Example:
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("Added successfully!");
}
}
)
4. Via HTTP GET Request to load JSON data.
Example:
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?, add http://" in front, function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m) .appendTo("#images");
if ( i == 3 ) return false;
});
});

The above is the detailed content of Ajax commonly used functions. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use time control in bootstrapNext article：How to use time control in bootstrap

See more

Ajax commonly used functions

What is AJAX?

Related articles