ajax与jquery

Posted C

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax与jquery相关的知识,希望对你有一定的参考价值。

Ajax:Ajax百度百科含义链接:

1.数据的传递 

2.是一种无刷新加载页面的技术,更新部分网页。

缺点:可能会对于后退功能失效,无法回到上一页面的状态。

  Ajax须知:JSON  和 xml

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

1.具有严谨的写法

2.键值对表示(类似map中的键值对)

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

JSON传输优于xml传输,相同条件下 (下同xml结构)JSON传输更快更轻便

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>

 Ajax - JSON (javascript) 

 

丶使用冒号赋值
 丶每条语句后以逗号结尾

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <script>
        var jsondate = {
            "name":"小明",
            "city":{"address":"北京"},
            "hobbies":{"movie":"蜘蛛侠","play":"computer"},

            "al":function () {
                alert("java")
            }

            //使用冒号赋值
            // 每条语句后以逗号结尾
            
        }
        alert(jsondate.name)  
        alert(jsondate.city.address)
        alert(jsondate.hobbies.movie)
        alert(jsondate.al())
        </script>
</head>
<body>

</body>
</html>

 

 

 

 Ajax 与 jquery

jQuery是一个快速、简洁的javascript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

Jquery使用方法与基本使用这里不详细说明。

注意:本例一以下内容都以jquery为写。

 

 Ajax

Ajax = 异步 JavaScript 和 XML标准通用标记语言的子集)。

优点:在变动大规模页面下 只用更新一小部分和维护数据。

缺点:用户在后退时不能够保存页面的状态,后退和收藏功能会失效。(浏览器不记录动态数据,只记录静态页面)

 Ajax的无刷新

传统加载页面方法

点击后观察地址变化

不使用ajax技术加载页面会改变当前页面的url。使用了ajax加载方式如下:

点击之后观察地址变化

 

局部进行刷新加载页面。

使用代码如下;

 jquery 的load()方法 加载页面(同上例子ajax所用代码)

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $("a").click(function () {
                    var url = this.href;
                    var args = {"time":new Date()}
                    $("#div").load(url,args);    //加载事件
                    return false;
                })
                $("#div").css({"border":"solid red","width":"100px","height":"200px "});
            })            
        </script>
</head>
<body>
<a href="ajax.txt">click</a>

<div id="div"></div>
</body>
</html>

 ajax.txt

 

 Ajax get() post() getJSON()

get() 与post()请求都是请求从服务器上请求数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get.post.</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
          $("#a").click(function () {
               $.get("JSON.txt",function (data,status) {
          $.post("JSON.txt",function (data,status) {
alert("数据:"+data +"状态:"+ status); 
})
})
})
</script>

</head> <body> <a id="a">点击</a> </body> </html>

 

以上是关于ajax与jquery的主要内容,如果未能解决你的问题,请参考以下文章

jQuery高级Ajax

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

使用 JQuery ajax 在 DOM 操作后附加事件

使用 Jquery 的同步“Ajax”调用似乎不起作用

前端面试题之手写promise