jQuery之AJAX的知識點總結

這次小編給大家整理了jQuery之AJAX的知識點，下面就是知識點匯總，一起來看一下。

一.AJAX概念
Asynchronous Javascript And XML(非同步JavaScript和XML)
AJAX並不是一種語言,而是一種創建互動網頁應用的網頁開發技術
AJAX是Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技術的組合
1.使用XHTML+CSS來標準化呈現;
2.使用XML和XSLT進行數據交換及相關操作;
3.使用XMLHttpRequest物件與Web伺服器進行非同步資料通訊;
4.使用Javascript操作Document Object Model(網路文檔物件模型)進行動態顯示及互動;
5.使用JavaScript綁定與處理所有資料
什麼是XML?
XML 指可擴充標記語言（EXtensible Markup Language）
XML 是一種標記語言，很類似HTML
XML 的設計宗旨是傳輸數據，而非顯示數據
XML 標籤則沒有被預先定義。您需要自行定義標籤。
XML 被設計為具有自我描述性。
XML 是 W3C 的建議標準
什麼是 XSLT？
XSLT 指XSL 轉換（XSL Transformations）[1]
XSLT 是XSL 中最重要的部分
XSLT 可將一種XML 文件轉換為另外一種XML 文件
XSLT 使用XPath 在XML文件中進行導覽
XSLT 是一個W3C 標準


AJAX核心物件是XMLHttpRequest


二.AJAX工作原理
#使用者操作流程：
使用者瀏覽器->JavaScript實例化XmlHttpRequest物件->AJAX引擎->http請求->web伺服器->後台業務系統
系統返回流程：
後台業務系統->後台伺服器->web伺服器->HTML,XML,JSON資料->AJAX引擎->HTML+CSS(Wel瀏覽器)->使用者瀏覽器


三.AJAX優缺點:
AJAX非同步處理優點:
減輕伺服器的負擔,AJAX一般只從伺服器取得只需要的資料
無重新整理頁面更新,減少使用者等待的時間
更好的客戶體驗,可以將一些伺服器的工作轉移到客戶端來完成,節省網路資源,提高使用者體驗
無平台限制
促進顯示與資料想分離
AJAX非同步處理的缺點:
頁面中存在大量JS,給搜尋引擎帶來困難
AJAX幹掉了Back和History功能,即對瀏覽器機制的破壞
存在跨域問題
只能傳送及接收utf-8編碼資料


#1.AJAX實作步驟


window.open(URL,name,features,replace)
URL:一個可選的字串，宣告了要在新視窗中顯示的文件的URL。如果省略了這個參數
或它的值是空字串，那麼新視窗就不會顯示任何文件
name:一個可選的字串，該字串是一個由逗號分隔的特徵列表，其中包括數字、字母和下劃線，
該字元聲明了新視窗的名稱。這個名稱可以用作標記 和

的屬性 target 的值。
如果該參數指定了一個已經存在的窗口，那麼 open() 方法就不再建立一個新窗口，
而只是傳回指定窗口的參考。在這種情況下，features 將被忽略
features:一個可選的字串，宣告了新視窗要顯示的標準瀏覽器的特徵。如果省略該參數，
新視窗將具有所有標準特徵。在視窗特徵這個表格中，我們對該字串的格式進行了詳細的說明
replace:
#一個可選的布林值。規定了裝載到視窗的 URL 是在視窗的瀏覽歷史記錄中建立一個新條目，
還是取代瀏覽歷史記錄中的目前條目。支援下面的值：
true - URL 取代瀏覽歷史記錄中的目前條目。
false - URL 在瀏覽歷史中建立新的條目


send()send()用於向一個已經連接的socket發送數據，如果無錯誤，返回值為所發送數據的總數，
否則返回SOCKET_ERROR。 [1]  send也是一個英文單字。


responseText屬性：
伺服器程序傳回資料的文字版本
伺服器程序傳回資料的相容DOM的XML文件物件status 伺服器返回的狀態碼, 如:404 = "文件末找到".
你向ajax後台的程序發送xmlhttp請求的時候, 後台程序接到請求會進            行處理,處理結束後,可以返回一串數據給前台,
這個就是responseText.
一般在後台程式C#中是Response.Write("字串") php中使用的是echo...就是一個輸出字串
因為要輸出一個字符串但有時候得到的是一個數組，但是要把他串行化，用PHP中的json技術把這個數組轉換成
一個字串輸出給前端，而前端respText屬性能接收住這個字串，然後透過JS中的json技術把這個字串
再次轉換成JS認識的物件來進行操作(json資料傳輸類型基本上哪種語言都認識可以用於各種語言的傳輸與轉換)


初始化XMLHttpRequest物件

  if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest發出HTTP請求

http_request.open("GET|POST","test.php?GET方式传值",true);
          http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
         //用于向一个已经连接的socket发送数据
         //如果是POST传输方式要把值写在send()函数里
          http_request.send(向一个已连接的套接口发送数据);
      XMLHttpRequest取得响应数据并显示
       http_request.onreadystatechange=function(){
if(http_request.readyState==4  && http_request.status==200){
                    $("p").text(http_request.responseText)
         }
      }

範例:
//GET方式
參數1：代表是以get還是post方式傳送請求 參數2：傳送請求給哪一個url  參數3：true代表非同步請求，false代表同步請求

http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();

#發送POST請求

var username=$("input[name='user_name']");

參數1：代表是以get還是post方式發送請求 參數2 ：傳送請求給哪個url  參數3：true代表非同步請求，false代表同步請求

http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

如果是POST傳輸方式要把值寫在send()函數裡

#

http_request.send({username:username});

四.JSON
Javascript Object Notation,是一種輕量級的資料交換格式
JSON每種語言都認識他所以用他進行各種語言的資料的轉換
JSON支援多種語言
格式
{key:value,key:value,.....}  物件格式
[{key:value,key:value,.. ...},{key:value,key:value,.....},......]  數組格式
PHP處理：
$json=json_encode($array) //對變數進行Json編碼
$array=json_decode($json) //將Json資料解碼轉換成PHP變數
JavaScript處理：
eval('('+json+')')  //將某個字串依照JS程式碼來執行
範例：

eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串

五.jQuery中AJAX應用1
.不要忘寫
##

$.ajax({
            //你要传的php文件的路径
            url:"test1.php",    ('服务器url地址')
            //以get方式传输拼接字符串
            data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
            //以什么方式传输
            type:'get',('post|get')
            //传输返回的数据类型
            dataType:'json',  ('xml|html|text|json|script')
            //展示 数据的方式
            success:function(res){
                $('h1').text('用户名为：'+res.user_name);
            },
                //错误信息
                error:function(xhr){
                },
              timeout:2000,
              async:true,
              cache:false
})

六.jQuery中AJAX應用2

$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

例：

#

            //'服务器url地址'，"json格式或字符串格式"
        $.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
               //如果后台发过来的值跟这里的值相等让他执行下面代码
                if(data.status=='ok'){
                    alert("登陆成功");
                    location.href="http://www.wl.com";
                }else{
                    alert("登陆失败");
                }
        //"xml|html|json|text|script"类型
        },'json')

七.jQuery中AJAX應用3#serialize( ) 序列表表格內容為字串，串列化資料用於Ajax 請求

$.post()
$.post('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

#範例：

//'服务器url地址'，"json格式或字符串格式" 用post方式提交要用form表单包起来
        // 然后用serialize()来拿里面所有有值
        $.post("test1.php",$('form').serialize(),function(res){
            //如果后台发过来的值跟这里的值相等让他执行下面代码
            if(res.status=='ok'){
                alert("登陆成功");
                location.href="http://www.wl.com";
            }else{
                alert("登陆失败");
            }
            //"xml|html|json|text|script"类型
        },'json')

php中接收處理輸出

#

try{
    $pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=数据库名",'数据库账号','数据库密码');
    $pdo->exec("set names utf8");
    $sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
    if($sen->rowCount()>0){
       // $arr=$sen->fetch(PDO::FETCH_ASSOC);
        //echo json_encode($arr);
        //echo 'yes';
       $arr['status']='ok';
    }else{
        echo 'no';
    }
    //切记用json数据类型传输
    echo json_encode($arr);
}catch (PDOException $e){
    echo $e->getMessage();
}

以上是jQuery之AJAX的知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！