1. 原生Ajax写法

  1. 建立XMLHTTPRequest对象
  2. 注册回调函数
    当服务器回应我们了,我们想要执行什么逻辑
  3. 使用open方法设置和服务器端交互的基本信息
    设置提交的网址,数据,post提交的一些额外内容
  4. 设置发送的数据，开始和服务器端交互
    发送数据
  5. 更新界面
    在注册的回调函数中,获取返回的数据,更新界面

示例代码:GET get的数据,直接在请求的url中添加即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
  // 创建XMLHttpRequest 对象
  var xml = new XMLHttpRequest();

  // 设置跟服务端交互的信息
  xml.open('get','01.ajax.php?name=fox');
  xml.send(null);    // get请求这里写null即可

  // 接收服务器反馈
  xhr.onreadystatechange = function () {
      // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 打印响应内容
          alert(xml.responseText);
      } 
  };
</script>

示例代码:POST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

2. Ajax工具函数封装

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
35
36
37
38
39
40
41
42
43
44
45
46
47
function ajax(option) {
  // 创建对象
  var xmlRequest ;
  if (XMLHttpRequest) {
      xmlRequest = new XMLHttpRequest();
  }else{
      xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

  }

  // 格式化传入的数据为name=fox&age=18这样的格式
  var formatStr = "";
  for(var item in option.data){
      // 获取属性名,属性值,进行拼接
      formatStr+=item;// 属性名
      formatStr+="=";//等号
      formatStr+=option.data[item];//属性值
      formatStr+="&";//分隔符
  }

  // 去除最后一个&
  formatStr = formatStr.slice(0,-1);

  // open方法 如果是get方法,那么url之后需要添加数据
  if(option.method == "get"){
      option.url = option.url+"?"+formatStr;
      option.data = null;
  }
  // 调用open方法
  xmlRequest.open(option.method,option.url)

  // 如果是post设置HTTP协议头
  if (option.method=="post") {
      xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  }

  // send方法 这里的data已经是修改过的,如果使用的是get方法,那么data为null
      xmlRequest.send(option.data);

  // 判断状态改变,调用方法
  xmlRequest.onreadystatechange = function () {
  // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
             option.success(这里的数据是ajax获取的);  
     } 
  };
}

3. JQueryAjax使用

格式化表单$(‘form’).serialize()

我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化name=fox&age=18类似这样的格式,JQuery已经封装好了一个格式化数据的方法

语法:$(selector).serialize() 直接可以将form中拥有name属性的表单元素的字,进行格式化

$.ajax({}) 方法

1
2
3
4
5
6
7
8
$.ajax({
        url:'01.php',//请求地址
        data:'name=fox&age=18',//发送的数据
        type:'GET',//请求的方式
        success:function (argument) {},// 请求成功执行的方法
        beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},//请求失败调用
    })