jq04--jq与ajax

之前我们学习了一些有关jq函数的知识，现在我们看看jq与ajax方面的一些东西：

1.ajax(Asynchronous JavaScript and XML 异步的JavaScript与xml):
   在不重载整个网页的情况下，ajax通过发送请求获取后台数据，显示在页面上。注意ajax并不是一种新的编程语言，而是使用现有标准的新方法。

2.jq与ajax：
   jq提供多个与ajax有关的方法。通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上
请求文本、HTML、XML或JSON，可以把这些外部数据直接载入网页的被选元素中。
   如果没有jq，ajax编程并不容易。因为不同的浏览器，ajax的实现方式不一样，这通常意味着我们需要编写
额外的代码对浏览器进行测试。jq已经解决了这个问题，我们只需要一行代码即可进行ajax请求

3.load()方法：
   $(selector).load(URL,data,callback);简单而强大的ajax方法，从服务器加载数据，并把返回的数据放入被选元素中
   URL：       必选，请求URL
   data:       可选，请求参数对象
   callback:   可选，回调函数

    //把文件"demo_test.txt"的内容加载到指定的<div>元素中
    $("#div1").load("demo.txt");        
    //把文件"demo_test.txt"中id="p1"的元素的内容，加载到指定的<div>元素中
    $("#div1").load("demo.txt #p1");

   可选的callback回调函数可以设置三个参数：
       responseTxt - 包含调用成功时的结果内容
       statusTXT   - 包含调用的状态
       xhr        - 包含 XMLHttpRequest 对象

    $("button").click(function(){
        $("#div1").load("demo.txt",function(responseTxt,statusTXT,xhr){
            if("success"==statusTXT){
                alert("内容加载成功");
            }else if("error"==statusTXT){
                alert("Error: "+xhr.status+": "+xhr.statusText);
            }
        });
    });

4.GET与POST：
   $.get(URL,callback):
   $.post(URL,data,callback):

    //$.get()方法从服务器上的一个文件中取回数据
    $("button").click(function(){
        $.get("demo.asp",function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
            });
        }
    );
    
    //ASP文件("demo.asp")类似这样:
    <%
        response.write("This is some text from an external ASP file.")
    %>

    //使用$.post()连同请求一起发送数据
    $("button").click(function(){
        $.post("demo.asp",
            {
                name:"Donald Duck",
                city:"Duckburg"
            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
            }
        );
    });
    
    //ASP文件("demo.asp")类似这样:
    <%
        dim fname,city
        fname=Request.Form("name")
        city=Request.Form("city")
        Response.Write("Dear " & fname & ". ")
        Response.Write("Hope you live well in " & city & ".")
    %>

参考链接(get与post的区别)：
https://www.cnblogs.com/logsharing/p/8448446.html

5.noConflict()：

我们使用$作为jQuery的简写，当其他js框架也使用“$”作为简写时，如何才能避免冲突呢？使用noConflict()方法。noConflict()方法会释放$标识符的控制，这样其他脚本就可以使用它了。

    //通过全名替代简写的方式来使用jQuery
    $.noConflict();
    jQuery(document).ready(function(){
        jQuery("button").click(function(){
            jQuery("p").text("jQuery 仍在运行！");
        });
    });
    
    //noConflict()可返回对jQuery的引用，可以把它存入变量，以供稍后使用
    var jq = $.noConflict();
    jq(document).ready(function(){
        jq("button").click(function(){
            jq("p").text("jQuery 仍在运行！");
        });
    });
    
    //把$符号作为变量传递给ready(),在函数内使用$符号，而在函数外，使用 "jQuery"
    $.noConflict();
    jQuery(document).ready(function($){
        $("button").click(function(){
            $("p").text("jQuery 仍在运行！");
        });
    });

猜你喜欢