ajax

2017-12-26 本文已影响0人伟大的洪立

什么是Ajax

全称：异步的javascript and xml
它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。
使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

Ajax概述

Ajax 这个概念是由 Jesse JamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：
1.JavaScript, 通过用户或者其他与浏览器相关事件捕获交互行为
2.XMLHttpRequest对象，通过这个对象可以在不中断的其他浏览器任务的情况下向服务器发送请求；
3..服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。

Ajax优缺点

优势主要以下几点： 1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
2.用户体验极佳（不刷新页面即可获取可更新的数据）；
3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

而 Ajax 的不足由以下几点：
1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面）；
3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；
4.开发调试工具缺乏（相对于其他语言的工具集来说， JS 或 Ajax 调试开发少的可怜）。

异步是什么

使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？
我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。

异步操作和同步操作
- 同步操作：不同的事情按照一定的顺序进行执行，后一件事情必须等到前一个执行完成才能执行，否则会处于等待状态。
  - 通常情况下，同一个模块中的代码是按照程序结构顺序执行的，就是后一行代码必须等待前一行代码执行完成才能执行，否则处于阻塞状态。
异步操作：不同的事情在执行过程中，同时执行。不分前后顺序
- 在程序代码执行过程中，后一行代码不会等待前一行代码执行完成再去执行，而是直接执行，表现出不同行的代码同时执行的效果。

get和post区别

get 形式请求数据，参数会以明文的形式拼接在 url 地址的后面，请求的长度受到 url 地址格式的限制；
post 形式请求数据，参数会打包到请求对象中进行传递，不会显示在 url 地址中。数据请求的安全性比较 GET 而言更加隐秘！

什么时候用 GET？什么时候用 POST？

get 方式请求数据的效率相比 POST 方式较高！
参数长度有一定的限制的情况下请求常规数据，使用 get 方式
参数长度没有限制或者包含二进制数据或者包含安全要求的数据等，请求的数据涉及到安全性的情况下，使用 Post 方式

如何实现ajax

运用 html 和 css 实现页面，表达信息
运用 XMLHttpRequest 和 web 服务器进行数据的异步交换
运用 javascript 操作 DOM，实现动态局部刷新
核心步骤：1.定义对象 2.发送数据 3.处理响应 4.DOM 渲染

这段代码不可用，出现跨域问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生ajax</title>
</head>
<body>
<script type="text/javascript">
    // 原生ajax实现有四步
    // 1.获取xmlHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 2.使用open打开链接, 2步和3步可以互换
    xhr.open("GET", "需要链接的网址", true);
    // 3.监听事件
    xhr.onreadystatechange = function() {

    }
    // 4. 发送请求
    xhr.send();
</script>
</body>
</html>

用个测试用的端口

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生ajax</title>
</head>
<body>
<script type="text/javascript">
    // 原生ajax实现有四步
    // 1.获取xmlHttpRequest对象
    var xhr = new XMLHttpRequest();

    // 2.使用open打开链接
    xhr.open("GET", " http://datainfo.duapp.com/shopdata/getclass.php", true);
    // 3.监听事件
    xhr.onreadystatechange = function() {
        // alert(xhr.readyState);
        if(xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
        }
    }
    // 4. 发送请求
    xhr.send();
</script>
</body>
</html>

这是接受到的信息

image.png

用JQuery获取ajax中的数据

get请求

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <ul></ul>
    <script type="text/javascript">
        $(function(){
            $.get("http://datainfo.duapp.com/shopdata/getclass.php",function(res, startus, xhr){
                    // console.log(res);
                    //console.log(startus);  //请求状态
                    // console.log(xhr);
                    // var data =JSON.parse(res);
                    var data = JSON.parse(res); // 转化为JSON数据
                    // console.log(data);
//遍历JSON 数据，放到<ul>中
                    $.each(data, function(i, v){
                        var $li = $("<li>");
                        $li.text(v["className"]);
                        $("ul").append($li);
                    });

            });
        });
    </script>
</body>
</html>

image.png

post请求

$.ajax()方法

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。JQuery 封装的底层 Ajax 操作函数，更加侧重于定制化选项，让开发人员控制的细节方面更加精确。
语法：$.ajax({name:value, name:value, ... })
这个方法只有一个参数，传递各个功能键值对的对象。

image.png
干货

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input{
            width: 400px;
            height: 40px;
        }
        ul{
            padding: 0px;
            margin: 0px;
            list-style: none;
            width: 400px;
        }
        ul li{
            height: 38px;
            width: 100%;
            line-height: 38px;
            border-bottom: 1px dotted #ccc;
        }
    </style>
</head>
<body>
    <input type="text" name="">
    <ul>
        <li>
            
        </li>
    </ul>
</body>
<script type="text/javascript">
    $(function(){
        $("input").keyup(function(){
            var $v = $(this).val();
            $.ajax({
                type:"get",
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$v+"&cb=?",
                data:{},
                dataType:"jsonp",
                success:function(res,status,xhr){
                    $("ul").empty();
                    $.each(res.s, function(i,v){
                            var $li = $("<li>");
                            $li.html(v);
                            $("ul").append($li);
                    });
                }
            })
        })
    })
</script>
<!-- https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc -->
</html>

image.png

ajax

什么是Ajax

Ajax概述

Ajax优缺点

异步是什么

get和post区别

如何实现ajax

用JQuery获取ajax中的数据

$.ajax()方法

猜你喜欢

热点阅读