PHPとAJAXのサンプルの詳細な説明

この記事では、AJAX、PHP と AJAX、JSON 形式、および jQuery の AJAX の基本について説明します。この記事が役立つことを願っています。

1. AJAXの基本

(1) AJAX(Asynchronous JavaScript and XML)：非同期JavaScriptとXMLの略称。

(2)AJAXはプログラミング言語ではなく、Webページ全体を読み込まずにWebページの一部を更新できる技術です。

(3) 従来の Web ページの欠点: コンテンツを更新するかフォームを送信する必要がある場合、ページ全体をリロードする必要があります。AJAX を使用する利点: バックグラウンドでサーバーと少量のデータを交換することで、 Web ページは非同期の部分更新を実現できます。複雑なフォームに記入する際のユーザーエクスペリエンスは非常に優れています。

(4) AJAX 同期と非同期: 同期とは、単にページ全体を非同期でロードすることを意味します。具体的には、クライアントとサーバー間の接続です。 Ajax テクノロジーが登場する前は、データは同期的に交換されていましたが、より複雑なフォームに記入する場合は非常に面倒でした。 XMLHttpRequest オブジェクトを使用すると、同期の世界が非同期の世界になります。バックグラウンドで XMLHttpRequest オブジェクトを通じてサーバーとデータを交換できます。

(5) XMLHttpRequest オブジェクトの作成: var requerst=new XMLHttpRequest(); オブジェクトを直接インスタンス化するだけです! 注: IE5 と IE6 はこの定義をサポートしていません。ブラウザー ページの互換性を実現したい場合は、次のコードを参照してください:

var request;
if(window.XMLHttpRequest){
    request  = new XMLHttpRequest();  // IE7+,Firefox,Chrome,Opera,Safari...
}else{
    request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}

(6) HTTP request: http はステートレス プロトコルです。端的に言えば、永続的な接続を確立できず、メモリも持たないプロトコルです。さらに: ページの要求と応答のプロセスを通じて Web ページのデバッグを実現します。

(6.1) 完全な HTTP リクエスト プロセスには通常、次の 7 つのステップがあります:

• TCP 接続を確立する

• Web ブラウザが Web サーバーにリクエスト コマンドを送信する

• Web ブラウザがリクエストを送信するヘッダー情報

• Webサーバーの応答

• Webサーバーが応答ヘッダー情報を送信

• Webサーバーがブラウザにデータを送信

• WebサーバーがTCP接続を閉じる

(6.2) httpリクエストは通常​​、次で構成されます4 つの部分の構成:

• GET または POST リクエストなどの HTTP リクエスト メソッドまたはアクション

• リクエストされる URL、リクエストされたアドレスが何であるかを知っておく必要があります

• リクエスト ヘッダーには、いくつかのクライアント環境情報が含まれます。本人確認情報など

• リクエストボディ。リクエストボディには、顧客によって送信されたクエリ支払い情報、フォーム情報などが含まれます

(6.3) GET および POST[メソッドから収集=「post/get」フォーム内の名前の値】

端的に言うと、フォームから渡された値を収集します。渡される値は、1 つは URL (安全ではない) の形式で表示され、もう 1 つは値 (安全) の形式で表示されます。GET は通常、パラメーターを渡すために

url を使用します。 2000 文字は誰でも閲覧できますが、安全ではありません。 POST は通常、フォームからデータを送信するために使用されます。パラメーターは http リクエスト本文に含まれており、送信される情報の量に制限はありません。 (6.4)HTTP 応答は通常、次の 3 つの部分で構成されます:

リクエストが成功したか失敗したかを示すために使用される、数値とテキストで構成されるステータス コード。
サーバー タイプ、日付、および時間、コンテンツタイプと長さなど;
レスポンスボディ、これはレスポンスボディです。
(6.5)HTTP ステータス コードは 3 桁で構成され、最初の桁はステータス コードのタイプを定義します。

1XX: Web ブラウザー要求が受信され、さらに処理されていることを示す情報タイプ
• 。

2XX: 成功。ユーザーリクエストが受信、理解され、正しく処理されたことを示します。例: 200 OK
3XX: リダイレクト。リクエストが成功しなかったため、顧客がさらなるアクションを実行する必要があることを示します
4XX: クライアント エラーは、クライアントによって送信されたリクエストに 404 NOT FOUND などのエラーがあることを意味します。これは、リクエストで参照されているドキュメントが存在しないことを意味します。
5XX: サーバー エラー。サーバーがリクエストの処理を完了できないことを示します。
(7) XMLHttpRequest はリクエストを送信します: (オブジェクトメソッド)

open (メソッドリクエストメソッド、URL リクエストアドレス、非同期リクエスト同期または非同期 (非同期は true、同期は false、実際、デフォルトはtrue)) ;///
• Call

  非同期リクエスト

send(string); (getメソッドを使用する場合、情報はアドレスバーURLに含まれるため、パラメータは空白またはnullのままにすることができます。投稿の場合は、入力する必要があります);/ /リクエスト

• をサーバーに送信します

例:

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息,告诉web服务器要发送一个表单;注意：setRequest请求一定要放在open和send之间，否则会抛出异常
request.send("name=王大锤&sex=男");

(8) XMLHttpRequest は応答を取得します: (オブジェクトのメソッドとプロパティ)

• responseText

  : 簡単に言えば、サーバーからの応答データを受信することです。対応するデータを文字列として取得します。

responsXML: 対応するデータを XML 形式で取得します。現在は一般的に JSON 形式のデータに変換されます。
status と statusText: http ステータス コードを数値とテキスト形式で返します。
getAllResponseHeader(): すべての応答ヘッダーを取得します。
getResponseHeader(): 応答内のフィールドの値をクエリします。
readyState 属性: 応答が正常に返されたときに通知を受け取ります。

• 0：请求未初始化，open还没有调用。

• 1：服务器连接已建立，open已经调用了。

• 2：请求已经接收，也就是接收到头信息了。

• 3：请求处理中，也就是接收到响应主体了。

• 4：请求已完成，且响应已就绪，也就是响应完成了。

举个栗子:涵盖了ajax的大部分内容(典型的xhr建立ajax的过程)

var request = new XMLHttpRequest();//创建XHR对象
request.open("GET","get.php",true);//调用异步请求
request.send();//发送异步请求
//对事件进行监听,判断服务器是否正确得做出了响应
request.onreadystatechange = function(){
  if(request.readyState===4 && request.status === 200){
    request.reponseText;//接收服务器响应回送的数据
   }
}

2.PHP与AJAX

实战:[服务器端与客户端]实现查询员工和新建员工的后台接口

(1)客户端部分代码:

//新建员工客户端代码
document.getElementById("save").onclick=function(){
    var request=new XMLHttpRequest();//创建XHR对象
    request.open("POST","action.php");//调用异步请求
    //data拼接的URL
    //document.getElementById("staffName").value获取表单中用户写入的值
    var data = "username=" + document.getElementById("staffName").value 
                  + "&num=" + document.getElementById("staffNumber").value 
                  + "&workname=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息
    request.send(data);//发送异步请求
    //对事件进行监听,判断服务器是否能正确做出响应
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //innerHTML不仅可以读取元素内容,还可以将内容写入元素
                //ajax引擎对象通过responseText属性或者responseXML属性接收服务器回送的数据，然后在静态页面中对其进行处理，使页面达到局部刷新的效果
                document.getElementById("createResult").innerHTML=request.responseText;
            }else{
                alter("发生错误:"+request.status);
            }
        }
    }
}

(2)服务器端部分代码:

//查询员工服务器端代码
<?php  
header(&#39;Content-type:text/html;charset=utf8&#39;);
$con=mysqli_connect("127.0.0.1","","");
mysqli_select_db($con,"function");
$sql="SELECT * FROM `ajax`";
$query=mysqli_query($con,$sql);
//数据库数据的总条数$number
$number=mysqli_num_rows($query);
for($i=0;$i<$number;$i++){
    //将每条数据转换成关联数组打印出来
    $arr=mysqli_fetch_row($query);
    //print_r($arr);
    //echo $arr[2];die;
    if($_GET[&#39;num&#39;]==$arr[2]){
        echo "找到员工:编号$arr[2],姓名:$arr[1],职位:$arr[3]";
        break;
    }
}
 ?>

3.JSON格式

(1)json:javascript对象表示法。

(2)json是存储和交换文本信息的语法，类似xml。采用键值对的方式组织，易于人们阅读与机器解析。

(3)json是独立于语言的，不管什么语言都可以解析json，只要按json的规则来就行。

(4)json的长度比xml小;json读写的速度更快;json可以使用js内建方法直接解析，转化成js对象，非常方便。

(5)json语法规则：json数据的书写格式是：名称/值对。

名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如"name":"王大锤"。注意：json与javaScript对象表示法不同，javaScript对象表示法的键值不需要用引号，但是json的键值要用引号。

注意：json可以是整型、浮点型、字符串(在双引号中)、布尔值(true或false)、数组(在方括号中)、对象(在花括号中)、null等数据类型。

举个栗子：

{//定义了一个json对象
  "staff":[//定义了一个数组
    {"name":"王大锤","age":21},//定义了一个name对象
    {"name":"叫兽","age":35}
  ]
}

(6)json解析：eval()和JSON.parse()两种方式解析成JSON形式

两种方法比较：建议使用JSON.parse()方法解析成JSON形式

eval();不安全，如果json中有函数或js程序代码（alert或一个window.location.href()跳转链接病毒网站等），会优先执行代码，危险操作。JSON.parse();对json文件具有校验功能，如果json文件里面有程序脚本，会解析报错。

举个栗子：

var jsondata='{
    "staff":[{
            "name":"王大锤",
            "age":22
        },
        {
            "name":"叫兽",
            "age":23
        },
        {
            "name":"王尼玛",
            "age":24
        }
    ]
}';

var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSON
var jsonobj=eval('(' + jsondata + ')');//eval解析JSON

alert(jsonobj.staff[0].name);

注意：上面书写是错误的，只为了看清楚。逗号不是分隔符，逗号是文本内容，所有的都应该紧凑写，不能自己为了看清楚，人为用空格分开。(这里找了一个小时错误...)

(7)json验证工具：JSONLint

(8)举个栗子:

使用json,首先需要服务器端的约定,
用此种方法能够减少更多的判断,以更加优雅的形式显示
{
    //前端规则验证、后端数据验证
    "success":true,//是否正确执行(表单等规则验证)
    "msg":"×××"//请求的响应值是否成功(http响应返回的信息)
}

服务器端部分代码:

//echo "参数错误，员工信息填写不全";
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';

if($query){
    //echo "员工：" . $_POST["username"] . " 信息保存成功！";
    echo '{"success":true,"msg":"员工保存成功"}';
}else{
    //echo "员工：" . $_POST["username"] . " 信息保存失败！";
    echo '{"success":false,"msg":"员工保存失败"}';
}

客户端json代码:其它不变,将服务器端响应传过来的responseText(文本形式)转换为(JSON形式),将json字符串转化为了一个json对象data,然后就能够以对象的形式处理数据

    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //将服务器端响应传过来的responseText(文本形式)转换为(JSON形式)
                //将json字符串转化为了一个json对象data
                var data=JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("createResult").innerHTML=data.msg;
                }else{
                    document.getElementById("createResult").innerHTML="出现错误"+data.msg;
                }
            }
        }
    }

4.jQuery中的AJAX

(1)使用jquery实现ajax请求：作用：避免兼容问题，代码简洁，操作快捷方便。

(2)语法:jQuery.ajax([settings])

• type：类型，“POST”或“GET”，默认为“GET”。

• url：发送请求的地址。

• data：是一个对象，连同请求发送到服务器的数据。

• dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”。

• success：是一个方法，请求成功后的毁掉函数。传入返回后的数据，以及包含成功代码的字符串。

• error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

相关推荐：

PHP与Ajax调用

php与ajax实现页面自动刷新

PHP与Ajax相结合实现登录验证小Demo_PHP

以上がPHPとAJAXのサンプルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。