html中label标签的作用

ajax的简单应用

一、ajax的相关了解

jQuery中的ajax() 方法通过 HTTP 请求加载远程数据。比如我们打开豆瓣top250的网页，当我们讲鼠标拉倒滚动条到页面最低端的时候，我们发现页面又自动加载了很多数据，这就是通过判断鼠标滑到页面底端，然后通过ajax发送http请求从服务器端拿到数据然后展示到页面上面的，ajax的好处不仅仅如何，他主要的作用还是在于他的异步性。

二、异步性解释

当我们打开一个网站，然后做一个操作的时候，我们只能等这个操作执行结束在进行其他操作的时候，这个叫做同步，而当我们进行一个操作的时候，我们还可以进行其他的事情，然后让之前的操作，自己慢慢执行结束就可以了，这个就是我们所说的异步。

三、代码展示

首先，我们需要在head标签里面添加上jQuery。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

然后比如说我现在有一个服务器，然后服务器里面有一些文件，这个我在之前的服务器的分类里面说过，大家可以去看一下，简单来说，其实我们每次访问的是别人服务器下面的某些个文件，比如百度，访问的可能就是他服务器下面的一个主页index.html的页面而已。现在假设我服务器里面有很多文件夹，然后我有一个页面’index.html`，现在我需要通过ajax的请求拿到文件夹里面的数据并且展示到页面上。在这里我还要跟大家说一下‘同源’的概念。

四、‘同源’概念解释

这里我就按照我个人理解了，概念大家也不一定能理解，首先我们观察百度的网址，其中的http是一个协议，那么同源必须要http的协议一样，http和https是同源的，另外ip地址，也就是域名，比如百度的3W.baidu.com，其实这就是一个ip地址，只不过这个ip被映射到了这个域名的下面，同源的情况，这个域名也必须要相同，然后就是端口号，其实我们直接输入百度的网址到浏览器，并没有看到端口号，那么这里说明一下，服务器默认的端口号是80，也就是说你你输入3w.baidu.com:80其实也是可以登录到百度的，就是说如果不写端口号和写端口号为80，其实是同源的，端口号后面的其实就是不同的文件夹的位置问题了，说道这里大家可能也就明白一点了，想要在服务器端发送ajax请求，必须要求同源，也就是：协议，ip，端口号必须是一样的，最后提醒一下大家，http请求可不是你浏览器上面的那个地址，而是服务器端的。

五、ajax代码

比如我现在要编写服务器端的ajax请求，我想拿到服务器端的json目录下面的cdjson.json这个文件里面的内容，然后把里面的内容展示到页面上。现在加入我是服务器端，我的ip是10.0.144.144。

//在body里面写上如下代码：
<div id="box">这个用来存放ajax请求到的数据</div>
<button id="btn">点击我添加ajax数据</button>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").bind("click",function(){
            $.ajax({
                    type: 'get',
//请求的方式,get或者post
                    url:"http://10.0.144.144/json/cdjson.json",
//请求的地址
                    data:{a:1,b:2},
//传给服务器的数据,也可以不发给服务器任何数据
                    datatype:"json",
//服务器返回给我们的类型
                    success: function(data,textStatus){
                        //其中data是服务器返回给我们的数据，textStatus是返回的状态，如果拿到了会返回success。
                        var d = data['class']['student']
                        for (var i=0;i<d.length;i++){
                                var info = d[i]
                                var $p = $('<p>'+info['name']+'</p>')
                                $('#box').append($p)
                            }
                        }
//回调函数，用来执行需要的操作    
                    })    
    })
})
</script>

当然了，我们这个写的是原生的ajax，其实ajax也有很多封装好的，比如get(),post()，这个交给读者自己去查看，不过正常情况下，掌握好原生的就够用了。不懂http请求过程的小伙伴可以去我博客http标签查看。

小伙伴们快去试试吧

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1990858822@qq.com