Ajax基础

1.Ajax介绍

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。[1] 

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。而Ajax可以不重载页面，只进行局部刷新。2005 年初，许多事件使得 Ajax 被大众所接受。Google 在它著名的交互应用程序中使用了异步通讯，如Google、Google 地图、Google 搜索 框架应用及对ajax框架的思考 框架应用及对ajax框架的思考 建议、Gmail等。

AJax使用原理

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

2.Ajax写法

get请求

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange = function (data) { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            console.log（data）;//输出接收到的数据。
        }
    }

}

// 发送请求:
request.open('GET', '/api/categories');//发送方式和目标地址
request.send();//get请求的内容在url中传送所以这里为空

 

post请求

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange = function (data) { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            console.log（data）;//输出接收到的数据
        }
    }

}
// 发送请求:
xmlhttp.open("POST","demo_post.asp",true);//发送方式和目标地址
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置一个请求头

xmlhttp.send(“name=tom”);//post请求的内容在send方法中作参数传送

 

3.Ajax的JQuery写法

JQuery中也封装了Ajax的方法，代码更加简单，易于阅读，理解。

$.ajax()

$.ajax()方法有以下常用参数：

url：  要求为string类型的参数，（默认为当前页面地址）发送请求地址。 type：要求为string类型的参数，请求方式（get或post），默认为get。 data：要求为object或string类型的参数，发送到服务端的数据 success：请求成功的回调函数 dataType：服务器返回数据的类型，例如：xml、string、html、json等 error：请求失败后的回调函数 complete：请求成功或失败的回调函数

$('button').click(function(){
    $.ajax({
        "url":"result/ajax2.php", //数据传递的接口地址
        "type":"post",
        "data":{ //data对应的value是一个JSON，向服务器传递的数据
            'name':$('input').eq(0).val(),
            'password':$('input').eq(1).val()
        },
        "success":function(data){
            $('h1').html(data); //请求数据成功返回的数据
        }
    });
 });

这里可以通过更改type的方式来改变ajax的请求方式。

$.get()

JQuery针对get请求和post请求，再封装了一个更加深入的方法。

jQuery的get请求语法：有两种方法传递数据，但是最终，参数都是以query string的方式传递给服务端

$.get("接口地址?k=v&k=v",回调函数); $.get("接口地址",JSON参数,回调函数);

Query的get请求方式1：用字符串拼接方法，麻烦，不建议用这种方式

$('button').click(function(){
   $.get('result/ajax.php?name='+$('input').eq(0).val()+"&password="+$('input').eq(1).val(),function(data){
       $('h1').html(data);
   });
});

jQuery的get请求方式2：用JSON形式传递参数，建议使用

$('button').click(function(){
    $.get('result/ajax.php',{
        'name':$('input').eq(0).val(),
        'password':$('input').eq(1).val(),
    },function(data){
        $('h1').html(data);
    });
 });

 

 

$.post()

jQuery的POST请求方式：用JSON形式传递参数

$('button').click(function(){
	$.post('result/ajax2.php',{
	    'name':$('input').eq(0).val(),
        'password':$('input').eq(1).val(),
	},function(data){
	    $('h1').html(data);
    });
});

$('button').click(function(){
    $.get('result/ajax.php',{
        'name':$('input').eq(0).val(),
        'password':$('input').eq(1).val(),
    },function(data){
        $('h1').html(data);
    });
 });