AJAX

一、ajax定义

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

 Ajax 的核心是 js 对象：XMLHttpRequest。

二、同步和异步

同步和异步的概念(这跟字面意思完全相反)

  • 同步：必须等待前面的任务完成，才能继续后面的任务（一个一个做，不能同时做多个）。

  • 异步：不受当前任务的影响（同时做多个事情）。

拿排队举例：

  • 同步：在银行排队时，只有等到你了，才能够去处理业务。

  • 异步：在排队的时候，可以听听音乐，可以看看书。

异步更新网站

我们以前访问一个网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。

可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。

 

三、发送 Ajax 请求的五个步骤

（一）创建Ajax对象，也就是XMLHttpRequest对象；

（二）设置请求类型、请求地址和是否异步；

（三）发送请求和请求参数；

（四）监听请求状态变化，我们需要写一些逻辑来处理不同状态下要做的事情；

（五）接收返回的数据。

 

四、请求类型

  • GET，例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#btnAjax').onclick = function () {
        // 发送ajax 请求 需要 五步

        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。
        ajaxObj.open('get', '02-ajax.php');

        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);

                // 修改页面的显示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
</body>
</html>
View Code

02-ajax.php：echo 'smyhvae'; 效果如下：

 

 

 

  • POST，例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'>
<script type="text/javascript">

    // 异步对象
    var xhr = new XMLHttpRequest();

    // 设置属性
    xhr.open('post', '02.post.php');

    // 如果想要使用post提交数据,必须添加此行
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 将数据通过send方法传递
    xhr.send('name=fox&age=18');

    // 发送并接受返回值
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
</script>
</body>
</html>
View Code

 

五、Ajax对象的几个重要方法和属性：

（一）.open(method, url, async);

　　method:请求的类型，有GET和POST两种

　　url:文件在服务器上的位置

　　async:是否选择异步，true为异步，false为同步

（二）.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

　　当选择POST类型时需要使用此方法添加HTTP头，然后在send方法中添加想要发送的数据

（三）.send(string);

　　当选择POST类型时添加参数；

（四）readyState属性、status属性；

（五）onreadystatechange事件；

　  注册onreadystatechange事件以后，只要ajax对象的readyState属性发生改变，就会调用onreadystatechange对应的函数。

（六）.responseText和.responseXML分别为字符串形式的数据和XML形式的数据。

 

六、实例代码

（一）原生Javascript的ajax写法

1需要做一下兼容

 1 <script>
 2     //定义一个变量来存储ajax对象
 3     var xhr=null;
 4     if(window.XMLHttpRequest){
 5         xhr=new XMLHttpRequest;
 6     } else{
 7         xhr=new ActiveXObject("Microsoft.XMLHTTP");
 8     }
 9     xhr.open("GET", "url", true);
10     xhr.send();//括号内可以添加字符串，只是在POST请求时使用。
11     xhr.onreadystateChange=function(){
12         if(xhr.readystate===4 && xhr.status===200){
13             console.log(xhr.responseText);
14         }
15     }
16 </script>

 

七、jquery的几个ajax方法

（一）.load()方法：从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

（二）.get()和.post()方法：通过 HTTP GET 或 POST 请求从服务器请求数据。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

语法：$.get('url',[data], callback);$.post('url',data, callback)

（三）.ajax()方法：

　　语法：$.ajax({

　　　　url:'url',

　　　　method:'GET/POST',

　　　　data:{},

　　　　success: function(res){

　　　　　　　　

　　　　}

　　})

八、Ajax的典型应用场景 

（一）、用户登录

（二）、搜索框提示

（三）、翻页

（四）、分类树或者树形结构

（五）、自动更新的页面

posted on 2021-04-27 08:27  前端码牛  阅读(112)  评论(0)    收藏  举报

导航