AJAX - Hantar permintaan ke pelayan

Untuk menghantar permintaan ke pelayan, kita perlu menggunakan kaedah open() dan hantar( ) kaedah. Kaedah

open() memerlukan tiga parameter:

Parameter pertama mentakrifkan kaedah yang digunakan untuk menghantar permintaan (GET atau POST).

Berbanding dengan POST, GET lebih ringkas dan lebih pantas, dan berfungsi dalam kebanyakan kes.

Walau bagaimanapun, sila gunakan permintaan POST dalam situasi berikut:

Tidak mungkin untuk menghantar sejumlah besar data ke pelayan menggunakan fail cache (mengemas kini fail atau pangkalan data pada pelayan) (POST tidak mempunyai had saiz data). POST adalah lebih stabil dan boleh dipercayai daripada GET apabila input pengguna mengandungi aksara yang tidak diketahui

Parameter kedua menentukan URL skrip sebelah pelayan (fail boleh menjadi sebarang jenis fail, seperti sebagai .txt dan .xml, atau fail skrip Pelayan seperti .asp dan .php (boleh melaksanakan tugas pada pelayan sebelum menghantar semula respons)).

Parameter ketiga menentukan bahawa permintaan harus diproses secara tak segerak (benar (tak segerak) atau palsu (segerak)). Kaedah

send() menghantar permintaan kepada pelayan. Jika kita menganggap bahawa fail HTML dan fail ASP terletak dalam direktori yang sama, maka kodnya adalah seperti ini:

xmlHttp.open("GET","time .asp",true) ;
xmlHttp.send(null);

DAPATKAN atau POS?

Berbanding dengan POST, GET lebih ringkas dan lebih pantas, dan berfungsi dalam kebanyakan kes.

Walau bagaimanapun, sila gunakan permintaan POST dalam situasi berikut:

Permintaan GET yang mudah:

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

Anda mungkin mendapat hasil cache.

Untuk mengelakkan perkara ini, tambahkan ID unik pada URL:

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

Jika anda ingin menghantar maklumat melalui kaedah GET, tambahkan maklumat pada URL:

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

Kod lengkap:

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
    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()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
    xmlhttp.send();
}
</script>
</head>
<body>
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
</body>
</html>

Permintaan POST yang mudah:

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

Jika anda perlu SIARAN data seperti borang HTML, sila gunakan setRequestHeader() untuk menambah pengepala HTTP. Kemudian nyatakan data yang ingin anda hantar dalam kaedah send()

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Sintaks:

setRequestHeader(header,value) Menambahkan pengepala HTTP pada permintaan.

pengepala: menentukan nama pengepala

nilai: menentukan nilai pengepala

Kod penuh:

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
    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()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">Request data</button>
    <div id="myDiv"></div>
</body>
</html>

url - fail pada pelayan

Parameter url kaedah open() ialah alamat fail pada pelayan:

xmlhttp.open("GET","ajax_test.html" ,true);

Fail boleh terdiri daripada sebarang jenis fail, seperti .txt dan .xml, atau fail skrip pelayan, seperti .asp dan .php (yang boleh melaksanakan tugas pada pelayan sebelum menghantar semula respons).

Async - Betul atau Salah?

AJAX merujuk kepada Asynchronous JavaScript dan XML.

Jika objek XMLHttpRequest hendak digunakan untuk AJAX, parameter async kaedah open()nya mesti ditetapkan kepada benar:

xmlhttp.open("GET"," ajax_test.html" ,true);

Menghantar permintaan tak segerak ialah peningkatan besar untuk pembangun web. Banyak tugas yang dilakukan pada pelayan agak memakan masa. Sebelum AJAX, ini boleh menyebabkan aplikasi hang atau berhenti.

Dengan AJAX, JavaScript tidak perlu menunggu respons daripada pelayan sebaliknya:

Laksanakan skrip lain sambil menunggu respons pelayan.

Async=true

Apabila menggunakan async=true, sila nyatakan fungsi yang akan dilaksanakan sebagai tindak balas kepada keadaan sedia dalam acara onreadystatechange:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Async = false

Jika anda perlu menggunakan async= false, sila tukar parameter ketiga dalam kaedah open() kepada false:

xmlhttp.open("GET","test1.txt",false) ;

Kami tidak mengesyorkan menggunakan async=false, tetapi untuk beberapa permintaan kecil, ia juga boleh dilakukan.

Ingat bahawa JavaScript akan menunggu sehingga respons pelayan sedia sebelum meneruskan. Jika pelayan sibuk atau lambat, aplikasi akan hang atau berhenti.

Nota: Apabila anda menggunakan async=false, sila jangan tulis fungsi onreadystatechange - hanya letakkan kod selepas pernyataan send():

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Contoh:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>实例</title>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function() {
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                xhr.open('get','new.php',true); //引入new.php文件
                xhr.send();
                xhr.onreadystatechange = function() {
                    if ( xhr.readyState == 4 ) {
                        if ( xhr.status == 200 ) {
                        //alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下
                           var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键：title和date
                           var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点
                           var html = '';
                           for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中
                              html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
                           }
                            oUl.innerHTML = html; //把内容放在页面里
                        } else {
                            alert('出错了,Err：' + xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

Buat fail.php baharu:

<?php
  header('content-type:text/html;charset="utf-8"');
  error_reporting(0);
    $news = array(
      array('title'=>'女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),
      array('title'=>'驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),
      array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),
      array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),
      array('title'=>'：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
    );
    echo json_encode($news);
?>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>实例</title> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','/asset/demo.ajax.php?dm=json&act=getnews',true); //引入new.php文件 xhr.send(); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { //alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下 var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型每一个json里面有两个键：title和date var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点 var html = ''; for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中 html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; //把内容放在页面里 } else { alert('出错了,Err：' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> <ul id="ul1"></ul> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik