嫩芽视频,美女被吸奶,教官脔到她哭h粗话h

Ajax

什么是ajax

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
以前，幾乎所有的網站都由HTML頁面實現，服務器處理每一個用戶請求都需要重新加載網頁。這樣的處理方式效率不高。用戶的體驗是所有頁面都會消失，再重新載入，即使只是一部分頁面元素改變也要重新載入整個頁面，不僅要刷新改變的部分，連沒有變化的部分也要刷新。這會加重服務器的負擔。
這可以用異步加載來解決。ajax實現了局部刷新頁面。

在了解ajax怎么使用之前，應該先了解XMLHttpRequest對象。

XMLHttpRequest對象

聲明一個XMLHttpRequest對象：

var request =new XMLHttpRequest();(IE5和IE6不支持這種聲明)
兼容IE5和IE6的聲明：
var request;
if(window.XMLHttpRequest){
Request=new XMLHttpRequest();//IE7+,和chrome，Firefox等瀏覽器;}
else{
request=new ActiveXObject(“Microsoft.XMLHTTP”);//IE5,IE6
}

Http

◎Http：

◆一套計算機通過網絡進行通信的規則；
◆一種無狀態協議（無狀態協議：不保留持久的連接）；
◆使客戶（瀏覽器）能夠向web服務器請求信息和服務。

◎HTTP請求：

●步驟：1.建立TCP連接；
2.Web瀏覽器向Web服務器發送請求命令；
3.Web瀏覽器發送請求頭信息；
4.Web服務器應答；
5.Web服務器發送應答頭信息；
6.Web服務器向瀏覽器發送數據；
7.Web服務器關閉TCP連接。
●HTTP請求一般由四部分組成：
1.HTTP請求的方法或動作，比如是get還是post請求；
2.正在請求的URL（請求的地址）；
3.請求頭，包含一些客戶端環境信息、身份驗證信息等；
4.請求體（請求正文），可以包含客戶提交的查詢字符串信息、表單信息等。

●GET：一般用于信息獲取（常用于查詢）；使用URL傳遞參數（變量顯示在URL中，所有人可見）；對所發送信息的數量有限制（一般在2000個字符）。
POST：一般用于修改服務器上的資源；對所發送的信息數量無限制。（不在URL中顯示，對其他人不可見，信息在請求體中）（常用于發送表單數據，新建、修改等）。

◎HTTP響應：

一般由三部分組成：
1.一個數字和文字組成的狀態碼，用來顯示請求是成功還是失敗；
2.響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等；
3.響應體（響應正文）。

XMLHttpRequest發送請求

open(method,url,asyn) //(請求方法GET/POST，請求地址，同步（false）/異步（true，默認為true，可不寫）)；
send(string) //（將請求發送到服務器，GET請求參數在URL中，所以參數string可寫none，也可不寫；POST時參數string要寫）

XMLHTTPRequest取得響應：
responseText：獲得字符串形式的響應數據；
responseXML：獲得XML形式的響應數據；
status和statusTest：以數字和文本的形式返回HTTP狀態碼；
getAllResponseHeader（）：獲取所有的響應報頭；
getResponseHeader（）：查詢響應中的某個字段的值；
readyState屬性：這個屬性的變化代表了服務器的響應的變化。
0：請求未初始化，open還沒有調用；
1：服務器連接已建立，open已經調用；
2：請求已接受，也就是接收到頭信息了；
3：請求處理中，也就是接收到響應主體了；
4: 請求已完成，且響應已就緒，也就是響應完成了。
eg：var request=new XMLHttpRequest();
request.open(“GET”,“get.php”,true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
//做一些事情 request.responseText
}
}

php

◎php:是一種創建動態交互性站點的服務器端腳本語言；
（服務器端腳本語言？HTML和js是客戶端語言，用于實現頁面呈現、特效；服務器端腳本語言：用于從服務器端的存取）
◎PHP：（兼容幾乎所有web服務器，支持幾乎所有數據庫）
◆能夠生成動態頁面內容；
◆能夠創建、打開、讀取、寫入、刪除以及關閉服務器上的文件；
◆能夠接收表單數據；
◆能夠發送并取回cookies；
◆能夠添加、刪除、修改數據庫中的數據；
◆能夠限制用戶訪問網站中的某些頁面等。

PHP測試頁面

● Php腳本以<?Php開頭,以?>結尾
● Php文件的默認文件擴展名是.php
● Php語句以分號結尾(;)

例子(員工查詢和添加)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//查詢表單
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>
//添加員工的表單
<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
    <option>男</option>
    <option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>

<script type="text/javascript">
//為“查詢”按鈕添加點擊事件：點擊時查詢相關員工：
    document.getElementById("search").onclick=function(){
        var request=new XMLHttpRequest();//生成XHR對象；
        request.open("GET","server.php?number="+document.getElementById("keyword").value);//XHR對象的open方法：請求方法：get；請求地址：server.php，參數為輸入的編號；
        request.send();//發送請求
//監聽request的狀態的改變：readyState的改變：
        request.onreadystatechange=function () {
            if(request.readyState==4){//如果readyState為4即服務器響應已完成；
                if(request.status===200){
                //如果request的狀態碼為200；
document.getElementById("searchResult").innerHTML=request.responseText;//將查詢結果顯示；
                }
                else{
                    alert("發生錯誤"+request.status);
                }
            }
        }
    }
//為“保存”按鈕添加點擊事件：點擊時添加相關員工：
document.getElementById("save").onclick=function(){
    var add_staff=new XMLHttpRequest();//生成XHR對象；
        add_staff.open("POST","server.php");//XHR對象的open方法：請求方法：post；請求地址：server.php；
        var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;//將填寫的數據保存到data；     add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設置請求頭的content-type為獲取表單信息；
        add_staff.send(data);//發送請求，post的參數為data；
//監聽add_staff的狀態的改變：readyState的改變：
        add_staff.onreadystatechange=function () {
            if(add_staff.readyState==4){/如果readyState為4即服務器響應已完成；
 if(add_staff.status===200){如果request的狀態碼為200；
//將響應內容顯示出來：  document.getElementById("createResult").innerHTML=add_staff.responseText;
                }
                else{
                    alert("發生錯誤"+add_staff.status);
                }
            }
        }
    }
</script>
</body>
</html>

Server.php文件：

<?php
//設置頁面內容是html編碼格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
        array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
    );

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通過員工編號搜索員工
function search(){
    //檢查是否有員工編號的參數
    //isset檢測變量是否設置；empty判斷值為否為空
    //超全局變量 $_GET 和 $_POST 用于收集表單數據
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo "參數錯誤";
        return;
    }
    //函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。
    //global 關鍵詞用于訪問函數內的全局變量
    global $staff;
    //獲取number參數
    $number = $_GET["number"];
    $result = "沒有找到員工。";
    
    //遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] . 
                              "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];
            break;
        }
    }
    echo $result;
}

//創建員工
function create(){
    parse_str(file_get_contents('php://input'), $_POST);//解決post拿不到內容;
    //判斷信息是否填寫完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo "參數錯誤，員工信息填寫不全";
        return;
    }
    //TODO: 獲取POST表單數據并保存到數據庫
    
    //提示保存成功
    echo "員工：" . $_POST["name"] . " 信息保存成功！";
}

json

◎JSON：javascript對象表示法；
◎JSON是存儲和交換文本信息的語法，類似XML。它采用鍵值對的方式來組織，易于人們閱讀和編寫，同時也易于機器解析和生成。
◎JSON是獨立于語言的，也就是說不管什么語言，都可以解析JSON，只需要按照JSON的規則來就行。

●JSON的長度和xml格式比起來很短小；
●JSON的讀寫速度更快；
●JSON可以使用javascript內建的方法直接進行解析，轉換成javascript對象，非常方便。

Json語法規則

Json數據的書寫格式是：名稱/值對，eg：“name”：“大豬”。
●Json的值可以是下面這些類型：
◆數字（整數或浮點數），eg：123,1.23；
◆字符串（在雙引號中）；
◆邏輯值（true或false）；
◆數組（在方括號中）；
◆對象（在花括號中）；
◆Null；

Eg：
{//大括號括起來表示一個json對象;
“staff”：[
{“name”: “洪七”, “age”:70},
{“name”: “郭靖”, “age”:35},
{“name”: “黃蓉”, “age”:30}
]
}

Json解析

◎Eval和JSON.parse:

Tip:在代碼中使用eval是很危險的!特別是用它執行第三方的json數據(其中可能包含惡意代碼)時,盡可能使用JSON.parse()方法解析字符串本身方法還可以捕捉json中的語法錯誤.
Eg:
●使用eval:
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);
結果:彈出 “洪七”;
●使用JSON.parse():
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
結果:彈出 “洪七”;
■如果代碼中出現錯誤:
●使用eval時,無法檢驗代碼中的錯誤,例如例子中的alert,eval方法不會檢查出這個錯誤,于是彈出 “123”,再彈出 “洪七”.
var jsondata='{"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);
●使用JSON.parse()方法時會檢查出alert這個錯誤,出現VM530:1 Uncaught SyntaxError: Unexpected token a in JSON at position 29(…),不會彈出任何信息.
Var jsondata='{"staff":[{"name":"洪七","age":alert(2)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

tip:☆Json格式化和校驗:
在線校驗工具:jsonlint.com

對上面的例子 “員工查詢和添加”用json改寫:
首先約定:
{
“success”:true;//表示請求是否成功;
“msg”: “xxx”;//表示請求的返回信息;
}

例子代碼修改:

客戶端代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
    <option>男</option>
    <option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>
<script type="text/javascript">
    document.getElementById("search").onclick=function(){
        var request=new XMLHttpRequest();
        request.open("GET","server.php?number="+document.getElementById("keyword").value);
        request.send();
        request.onreadystatechange=function () {
            if(request.readyState==4){
                if(request.status===200){
                    var data=JSON.parse(request.responseText);//解析服務器返回的信息;
                    if(data.success){
                        document.getElementById("searchResult").innerHTML=data.msg;
                    }
                    else {
                        document.getElementById("searchResult").innerHTML="出現錯誤:"+data.msg;
                    }
                }
                else{
                    alert("發生錯誤"+request.status);
                }
            }
        }
    }

    document.getElementById("save").onclick=function(){
        console.log('haha');
        var add_staff=new XMLHttpRequest();
        add_staff.open("POST","server.php");
        var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;
add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        add_staff.send(data);
        add_staff.onreadystatechange=function () {
            if(add_staff.readyState==4){
                if(add_staff.status===200){
                    var data=JSON.parse(add_staff.responseText);
                    if(data.success){
                        document.getElementById("createResult").innerHTML=data.msg;
                    }
                    else {
      document.getElementById("createResult").innerHTML = "出現錯誤" + data.msg;
                    }
                }
                else{
                    alert("發生錯誤"+add_staff.status);
                }
            }
        }
    }
</script>
</body>
</html>

服務器端server.php修改:

<?php
//設置頁面內容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
        array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
    );

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通過員工編號搜索員工
function search(){
    //檢查是否有員工編號的參數
    //isset檢測變量是否設置；empty判斷值為否為空
    //超全局變量 $_GET 和 $_POST 用于收集表單數據
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo '{"success":false,"msg":"參數錯誤"}';
        return;
    }
    //函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。
    //global 關鍵詞用于訪問函數內的全局變量
    global $staff;
    //獲取number參數
    $number = $_GET["number"];
    $result = '{"success":false,"msg":"沒有找到員工。"}';
    
    //遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = '{"success":true,"msg":"找到員工：員工編號：' . $value["number"] . '，員工姓名：' . $value["name"] .'，員工性別：' . $value["sex"] . '，員工職位：' . $value["job"].'"}';
            break;
        }
    }
    echo $result;
}

//創建員工
function create(){
    parse_str(file_get_contents('php://input'), $_POST);
    //判斷信息是否填寫完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo '{"success":false,"msg":"參數錯誤，員工信息填寫不全"}';
        return;
    }
    //TODO: 獲取POST表單數據并保存到數據庫
    
    //提示保存成功
    echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功！"}';
}

用jquery實現ajax

Jquery.ajax([settings])
●Type:類型, “POST”或者 “GET”,默認為 “GET”
●Url:發送請求地址;
●Data:是一個對象,連同請求發送到服務器的數據;
●dataType:預期服務器返回的數據類型.如果不指定,jquery將自動根據HTTP包MIME信息來智能判斷,一般我們采用json格式,可以設置為 “json”.
●Success:是一個方法,請求成功后的回調函數.傳入返回后的數據,以及包含成功代碼的字符串.
●Error:是一個方法,請求失敗時調用此函數,傳入XMLHttpResult對象.
用jquery實現ajax改寫例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
    <option>男</option>
    <option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>

<script src="jquery-3.1.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#search").click(function () {
            $.ajax({
                type:"GET",
                url:"server.php?number="+$("#keyword").val(),
                dataType:"json",
                success:function (data) {
                    if(data.success){
                        $("#searchResult").html(data.msg);
                    }
                    else {
                        $("#searchResult").html("出現錯誤:"+data.msg);
                    }
                },
                error:function (jqXHR) {
                    alert("發生錯誤"+jqXHR.status);
                }
            });
        });

        $("#save").click(function () {
            $.ajax({
                type:"POST",
                url:"server.php",
                dataType:"json",
                data:{
                    name:$("#staffname").val(),
                    number:$("#staffnumber").val(),
                    sex:$("#staffsex").val(),
                    job:$("#staffjob").val()
                },
                success:function (data) {
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }
                    else {
                        $("#createResult").html("出現錯誤:"+data.msg);
                    }
                },
                error:function (jqXHR) {
                    alert("發生錯誤"+jqXHR.status);
                }
            });
        });

    });
    /*document.getElementById("search").onclick=function(){
        var request=new XMLHttpRequest();
        request.open("GET","server.php?number="+document.getElementById("keyword").value);
        request.send();
        request.onreadystatechange=function () {
            if(request.readyState==4){
                if(request.status===200){
                    var data=JSON.parse(request.responseText);
                    if(data.success){
                        document.getElementById("searchResult").innerHTML=data.msg;
                    }
                    else {
                        document.getElementById("searchResult").innerHTML="出現錯誤:"+data.msg;
                    }
                }
                else{
                    alert("發生錯誤"+request.status);
                }
            }
        }
    }

    document.getElementById("save").onclick=function(){
        console.log('haha');
        var add_staff=new XMLHttpRequest();
        add_staff.open("POST","server.php");
        var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;
        add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        add_staff.send(data);
        add_staff.onreadystatechange=function () {
            if(add_staff.readyState==4){
                if(add_staff.status===200){
                    var data=JSON.parse(add_staff.responseText);
                    if(data.success){
                        document.getElementById("createResult").innerHTML=data.msg;
                    }
                    else {
                        document.getElementById("createResult").innerHTML = "出現錯誤" + data.msg;
                    }
                }
                else{
                    alert("發生錯誤"+add_staff.status);
                }
            }
        }
    }*/
</script>
</body>
</html>

跨域

◎一個域名地址的組成:

當協議、子域名、主域名、端口號中的任意一個不相同時，都算作不同域。
◎不同域之間相互請求資源，就算做跨域，比如：http://www.abc.com/index/html請求http://www.efg.com/service.php
◎Javascript出于安全方面的考慮，不允許跨域調用其他頁面的對象。
◎跨域就是因為javascript同源策略的限制，a.com域名下的js無法操作b.com或是c.a.com域名下的對象。
◎Javascript出于安全方面的考慮，不允許跨域調用其他頁面的對象。
●www.abc.com/index.html調用www.abc.com/service.php（沒有寫協議默認是http，所以協議、主域名、子域名和端口號都相同，非跨域）
●www.abc.com/index.html調用www.efg.com/service.php(子域名不同，跨域）
●www.abc.com/index.html調用bbs.abc.com/service.php（子域名不同，跨域）
●www.abc.com/index.html調用https://www.abc.com/service.php(協議不同，一個是http，一個是https，跨域）
●www.abc.com/index/html調用www.abc.com:81/service.php(端口號不同，跨域）

處理跨域的方法：

用jsonp處理跨域:

jsonp可用于解決主流瀏覽器的跨域數據訪問的問題(即可以處理get不可以處理post)

修改例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
    <option>男</option>
    <option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>

<script src="jquery-3.1.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#search").click(function () {
            $.ajax({
                type:"GET",
                url:"http://localhost:8080/try2/server.php?number="+$("#keyword").val(),//客戶端請求的url地址屬于跨域,端口號不同.
                dataType:"jsonp",//修改dataType為jsonp;
                jsonp:"callback",//添加jsonp屬性為自定義的callback;
                success:function (data) {
                    if(data.success){
                        $("#searchResult").html(data.msg);
                    }
                    else {
                        $("#searchResult").html("出現錯誤:"+data.msg);
                    }
                },
                error:function (jqXHR) {
                    alert("發生錯誤"+jqXHR.status);
                }
            });
        });

        $("#save").click(function () {
            $.ajax({
                type:"POST",
                url:"server.php",
                dataType:"json",
                data:{
                    name:$("#staffname").val(),
                    number:$("#staffnumber").val(),
                    sex:$("#staffsex").val(),
                    job:$("#staffjob").val()
                },
                success:function (data) {
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }
                    else {
                        $("#createResult").html("出現錯誤:"+data.msg);
                    }
                },
                error:function (jqXHR) {
                    alert("發生錯誤"+jqXHR.status);
                }
            });
        });

    });
    
</script>
</body>
</html>

服務器端代碼server.php:

<?php
//設置頁面內容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8");

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組
$staff = array
(
    array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
    array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
    array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
);

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通過員工編號搜索員工
function search(){
    $jsonp=$_GET["callback"];
    //檢查是否有員工編號的參數
    //isset檢測變量是否設置；empty判斷值為否為空
    //超全局變量 $_GET 和 $_POST 用于收集表單數據
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo '{"success":false,"msg":"參數錯誤"}';
        return;
    }
    //函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。
    //global 關鍵詞用于訪問函數內的全局變量
    global $staff;
    //獲取number參數
    $number = $_GET["number"];
    $result = $jsonp.'({"success":false,"msg":"沒有找到員工。"})';

    //遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = $jsonp.'({"success":true,"msg":"找到員工：員工編號：' . $value["number"] . '，員工姓名：' . $value["name"] .'，員工性別：' . $value["sex"] . '，員工職位：' . $value["job"].'"})';
            break;
        }
    }
    echo $result;
}

//創建員工
function create(){
    parse_str(file_get_contents('php://input'), $_POST);
    //判斷信息是否填寫完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo '{"success":false,"msg":"參數錯誤，員工信息填寫不全"}';
        return;
    }
    //TODO: 獲取POST表單數據并保存到數據庫

    //提示保存成功
    echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功！"}';
}

用XHR2處理跨域:

Html5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其他的一些新功能.
IE10以下的版本都不支持.
在服務器端做一些小的修改即可:
Header(‘Access-Control-Allow-Origin:’);
Header(‘Access-Control-Allow-Methods:POST,GET’);
Eg:
<?php
//設置頁面內容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
header("Access-Control-Allow-Origin:");//*代表所有域都可以訪問,也可以設置一個特定的域名;
header("Access-Control-Allow-Methods:POST,GET");

——以上是我在慕課網上學習ajax的學習筆記。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Ajax學習筆記

Ajax學習筆記

Ajax

什么是ajax

XMLHttpRequest對象

聲明一個XMLHttpRequest對象：

Http

◎Http：

◎HTTP請求：

◎HTTP響應：

XMLHttpRequest發送請求

php

PHP測試頁面

json

Json語法規則

Json解析

◎Eval和JSON.parse:

例子代碼修改:

用jquery實現ajax

跨域

處理跨域的方法：

用jsonp處理跨域:

用XHR2處理跨域:

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Ajax學習筆記

Ajax

什么是ajax

XMLHttpRequest對象

聲明一個XMLHttpRequest對象：

Http

◎Http：

◎HTTP請求：

◎HTTP響應：

XMLHttpRequest發送請求

php

PHP測試頁面

json

Json語法規則

Json解析

◎Eval和JSON.parse:

例子代碼修改:

用jquery實現ajax

跨域

處理跨域的方法：

用jsonp處理跨域:

用XHR2處理跨域:

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频