Ajax

发表于   |   分类于   |  

一.前言

本文将从下面几个方面来了解AJAX的使用方法

  • GET和POST请求
  • JSON
  • AJAX流程
  • jQuery中的AJAX
  • 处理跨域问题

二.GET和POST请求

想学习AJAX，就必须先了解GET请求和POST请求。

GET与POST的区别

  1. GET请求的数据会附在URL之后。
  2. GET请求数据有大小限制，POST不限制大小。
  3. GET的安全性要比POST的安全性低。

GET请求

这里使用form表单来进行提交

  • html代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <!-- 要向服务器发送数据必须使用form表单，使用get方法-->
    <form action="get.php" method="get">
        <!-- 使用name来传递数据 -->
        <input type="text" name="user" />
        <!-- 数据提交 -->
        <input type="submit" value="发送请求" />
    </form>

</body>
</html>
  • php代码
1
2
3
4
5
6
<?php 
    //使用utf8编码格式（如不设置，输入中文时，浏览器将无法正确解析中文）
    header('Content-type:text/html;charset=utf8');
    // 使用$_GET获取数据
    echo "hello $_GET[user]";
 ?>

POST请求

POST请求与GET请求的用法基本相同

  • html代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <!-- 要向服务器发送数据必须使用form表单，使用post方法 -->
    <form action="post.php" method="post">
        <!-- 使用name来传递数据 -->
        <input type="text" name="user" />
        <!-- 数据提交 -->
        <input type="submit" value="发送请求" />
    </form>

</body>
</html>
  • php代码
1
2
3
4
5
6
<?php 
    //使用utf8编码格式（如不设置，输入中文时，浏览器将无法正确解析中文）
    header('Content-type:text/html;charset=utf8');
    // 使用$_POST获取数据
    echo "hello $_POST[user]";
 ?>

三. JSON

JSON语法规则

  1. 书写格式
    名称 : 值
    “user”:”yimi”
  2. JSON值与对于的符号
    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true 或 false）
    • 数组（在方括号中）
    • 对象（在花括号中）
    • null
  3. JSON对象
    对象中可以包含多个名称和值 —- {在花括号中写}
    { “user”:”yimi” , “password”:”123” }
  4. JSON数组
    JSON 数组可包含多个对象 —- [在方括号中书写]
1
2
3
4
5
6
{
"students": [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
]
}
  1. 通过JS赋值
1
2
3
4
var students = [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
];

JSON使用

前面做了那么多的铺垫，就是下面的两个方法，这是JSON中很重要的方法，特别是在数据传递的时候，这两个方法经常被使用。

  1. 将字符串转换成JSON对象
    var obj = JSON.parse(jsonstr);
  2. 将JSON对象转换成字符串
    var str = JSON.stringify(jsonobj);

四.AJAX流程

AJAX用于实现异步加载

AJAX使用流程及记忆方法

此记忆方法可能不算好，如果觉得不适合你，可以另外重新想一个。

  1. new XMLHttpRequest(); — 收到一个新的快递
  2. open(‘Methor’,url,true); — 你迫不及待地打开
  3. send(); — 发现你的东西有问题，就给送回去了
  4. function onload(){} — 卖家处理你的快递
  5. responseText — 处理后，再把快递给你反回来

GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //创建一个ajax对象
        var xhr = new XMLHttpRequest();
        //第一个参数：采用post/get形式请求
        //第二个参数：选择要连接的网址
        //第三个参数：是否发起异步请求，一般为true，也可以不写，默认为true。
        xhr = open('GET','ajax.php',true);
        //将数据发送给服务器（GET请求一般为null）
        xhr = send(null);
        //ajax请求成功后的回调
        xhr.onload = function(){
            //服务器返回的数据,请求之前为空
            console.log(xhr.responseText);
        }
    </script>
</body>
</html>

POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
      //创建一个ajax对象
      var xhr = new XMLHttpRequest();
      //第一个参数：采用post/get形式请求
      //第二个参数：选择要连接的网址
      //第三个参数：是否发起异步请求，一般为true，也可以不写，默认为true。
      xhr = open('POST','ajax.php',true);
      //设置Content-Type,以告知服务器实体中有参数 
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //将数据发送给服务器（括号里面为你要传递到服务器的数据）
      xhr = send("user="+username);
      //ajax请求成功后的回调
      xhr.onload = function(){
          //服务器返回的数据,请求之前为空
          console.log(xhr.responseText);
      }
  </script>

文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <!-- 设置 enctype="multipart/form-data" -->
    <form id="regForm" enctype="multipart/form-data">
        <input type="text" name="user"/><br />
        <input type="password" name="pwd"/><br />
        <a class="upload">
            <input type="file" name="icon"/>
        </a>
        <input type="button" onclick="reg()" value="立即注册" />
    </form>
    
    
    <script type="text/javascript">
        function reg(){
            var regForm = document.getElementById('regForm');
            var formData = new FormData(regForm);

           var reg_api = 'reg.php' ;
           var xhr = new XMLHttpRequest();
           xhr.open('POST',reg_api,true);
           // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');不需要设置Content-Type
           xhr.send(formData);
           xhr.onload = function(){
                //json字符串
                var jsonStr = xhr.responseText;
                //将json字符串转换为json对象
                var obj = JSON.parse(jsonStr);
                alert(obj.message);
           }
        }
    </script>
    

</body>

五.jQuery中的AJAX

jQuery中的GET方法

  • HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <button id="btn">发送一个ajax请求</button>
    <div id="box"></div>

    <script type="text/javascript">
        $('#btn').click(function(event) {
            //第一个参数:要链接的网址
            //第二个参数：要发送的数据
            //第三个参数：回调函数
            $.get('jq_get.php',{'user':'yimi'}, function(data) {
                $('#box').html(data);
            });
        });
    </script>
</body>
</html>
  • php代码
1
2
3
<?php 
    var_dump($_GET);
 ?>
  • 输出结果

    array (size=1)
    ‘user’=>string’yimi’(length=4)

jQuery中的POST方法

  • HTML主要代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <button id="btn">发送一个ajax请求</button>
    <div id="box"></div>
 <script type="text/javascript">
        $('#btn').click(function(event) {
            //第一个参数:要链接的网址
            //第二个参数：要发送的数据
            //第三个参数：回调函数
            $.post('jq_post.php', {'user':'yimi','pwd':'123456'}, function(data) {
               $('#box').html(data)
            });
        });
 </script>
</body>
  • php代码
1
2
3
<?php 
    var_dump($_POST);
 ?>
  • 输出结果

    array (size=2)
    ‘user’=>string’yimi’(length=4)
    ‘pwd’=>string’123456’(length=6)

jQuery中的JAJAX方法

  • HTML主要代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
    <button id="btn">发送一个ajax请求</button>
    <div id="box"></div>

    <script type="text/javascript">
        $('#btn').click(function(event) {
            $.ajax({
                url: 'jq_ajax.php',//要链接的地址
                type: 'POST',//请求可以是post，也可以是get
                dataType: 'html',//返回html数据
                data: {'user': 'yimi','pwd':'123456'},//要发送的数据
            })
            //成功的回调函数
            .done(function(data) {
                console.log("success");
                $('#box').html(data);
            })
            //失败的回调函数
            .fail(function() {
                console.log("error");
            })
            //成功或失败都会执行的函数
            .always(function() {
                console.log("complete");
            });
        });
    </script>
</body>
  • php代码
1
2
3
<?php 
    var_dump($_POST);
 ?>
  • 输出结果

    array (size=2)
    ‘user’=>string’yimi’(length=4)
    ‘pwd’=>string’123456’(length=6)

六.处理跨域问题

利用XHR2的方法来实现跨域处理（ie10以下不支持）
只需在php代码中加入以下代码即可

1
2
header("Access-Control-Allow-Origin:*");//*号表示允许所有域访问
header("Access-Control-Allow-Methods:POST,GET");//请求

By : Yimi-shan