Perkongsian kemahiran penulisan ajax asli javascript_javascript

ajax: cara untuk meminta data tanpa memuat semula keseluruhan halaman; Teras teknikal ajax ialah objek XMLHttpRequest; proses permintaan ajax: buat objek XMLHttpRequest, sambung ke pelayan, hantar permintaan, terima data respons;

//Ujian

/**
 * 得到ajax对象
 */
function getajaxHttp() {
  var xmlHttp;
  try {
    //chrome, Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
    } catch (e) {
      // Internet Explorer
      try {
        //IE5，6
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      try {
        //IE7以上
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("您的浏览器不支持AJAX！");
        return false;
      }
    }
  }
  return xmlHttp;
}
/**
 * 发送ajax请求
 * url--url
 * methodtype(post/get)
 * con (true(异步)|false(同步))
 * parameter(参数)
 * functionName(回调方法名，不需要引号,这里只有成功的时候才调用)
 * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象)
 * obj需要到回调方法中处理的对象
 */
function ajaxrequest(url,methodtype,con,parameter,functionName,obj){
  var xmlhttp=getajaxHttp();
  xmlhttp.onreadystatechange=function(){
     
    // readyState值说明 
    // 0,初始化,XHR对象已经创建,还未执行open 
    // 1,载入,已经调用open方法,但是还没发送请求 
    // 2,载入完成,请求已经发送完成 
    // 3,交互,可以接收到部分数据 
  
    // status值说明 
    // 200:成功 
    // 404:没有发现文件、查询或URl 
    // 500:服务器产生内部错误 
 
    if(xmlhttp.readyState==4&& XHR.status == 200){
      //HTTP响应已经完全接收才调用
      functionName(xmlhttp,obj);
    }
  };
  xmlhttp.open(methodtype,url,con);
  xmlhttp.send(parameter);
}
//这就是参数
function createxml(){
  var xml="<user><userid>asdfasdfasdf<\/userid><\/user>";//"\/"这不是大写V而是转义是左斜杠和右斜杠
  return xml;
}
//这就是参数
function createjson(){
  var json={id:0,username:"好人"};
  return json;
}
function c(){
  alert("");
}

Mari kita lihat contoh lain

ajaxrequest("http://www.baidu.com","post",true,createxml(),c,document);

Mari kita lihat prinsipnya

ajax({
    url: "./TestXHR.aspx",       //请求地址
    type: "POST",            //请求方式
    data: { name: "super", age: 20 },    //请求参数
    dataType: "json",
    success: function (response, xml) {
      // 此处放成功后执行的代码
    },
    fail: function (status) {
      // 此处放失败后执行的代码
    }
  });

  function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
      var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        var status = xhr.status;
        if (status >= 200 && status < 300) {
          options.success && options.success(xhr.responseText, xhr.responseXML);
        } else {
          options.fail && options.fail(status);
        }
      }
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
      xhr.open("GET", options.url + "&#63;" + params, true);
      xhr.send(null);
    } else if (options.type == "POST") {
      xhr.open("POST", options.url, true);
      //设置表单提交时的内容类型
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(params);
    }
  }
  //格式化参数
  function formatParams(data) {
    var arr = [];
    for (var name in data) {
      arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".",""));
    return arr.join("&");
  }

1. Cipta

1.1, IE7 dan ke atas menyokong objek XHR asli, jadi anda boleh menggunakannya secara langsung: var oAjax = new XMLHttpRequest();

Dalam versi 1.2, IE6 dan sebelumnya, objek XHR dilaksanakan melalui objek ActiveX dalam perpustakaan MSXML. Sesetengah buku memperincikan tiga versi berbeza bagi objek tersebut dalam IE, iaitu MSXML2 =new ActiveXObject('Microsoft.XMLHTTP');

2. Sambung dan hantar

2.1. Tiga parameter fungsi open(): kaedah permintaan, alamat permintaan dan sama ada untuk meminta secara tidak segerak (permintaan segerak jarang berlaku dan belum digunakan setakat ini); 2.2 Kaedah permintaan GET menyerahkan data ke pelayan melalui parameter URL, manakala POST menyerahkan data ke pelayan sebagai parameter penghantaran;

2.3. Dalam permintaan POST, sebelum menghantar data, jenis kandungan penyerahan borang mesti ditetapkan

2.4. Parameter yang diserahkan kepada pelayan mesti dikodkan melalui kaedah encodeURIComponent() Malah, dalam senarai parameter "key=value", kedua-dua kunci dan nilai perlu dikodkan kerana ia akan mengandungi aksara khas. Setiap kali permintaan dibuat, rentetan "v=xx" akan dieja ke dalam senarai parameter Ini adalah untuk menolak caching dan meminta terus ke pelayan setiap kali.

encodeURI(): digunakan untuk pengekodan keseluruhan URI yang merupakan sebahagian daripada URI tidak akan dikodkan, seperti titik bertindih, garis miring ke hadapan, tanda soal dan tanda paun yang sepadan dengan fungsi penyahkodURI(); 🎜> encodeURIComponent(): digunakan untuk mengekod bahagian tertentu URI, dan akan mengekod mana-mana aksara bukan standard yang ditemuinya;

3. Terima

3.1. Selepas menerima respons, data respons akan secara automatik mengisi objek XHR Atribut yang berkaitan adalah seperti berikut
responseText: kandungan badan yang dikembalikan oleh respons, iaitu jenis rentetan

responseXML: Jika jenis kandungan respons ialah "teks/xml" atau "aplikasi/xml", atribut ini akan menyimpan data xml yang sepadan, iaitu jenis dokumen yang sepadan dengan XML

status: kod status HTTP respons; statusTeks: Perihalan status HTTP 3.2. Atribut readyState bagi objek XHR menunjukkan peringkat aktif semasa proses permintaan/tindak balas ini adalah seperti berikut

0 - Tidak dimulakan, kaedah open() belum dipanggil

1-Mulakan, kaedah open() dipanggil, dan kaedah send() tidak dipanggil
2-Hantar, kaedah send() telah dipanggil, dan tiada respons telah diterima; 3-Terima, sebahagian daripada data respons telah diterima; 4-Lengkap, semua data respons telah diterima;
Selagi nilai readyState berubah, acara readystatechange akan dipanggil (Malah, untuk kelancaran logik, readystatechange boleh diletakkan selepas penghantaran, kerana apabila menghantar, meminta pelayan akan menyebabkan komunikasi rangkaian, yang mengambil masa. Tentukan acara readystatechange selepas penghantaran juga mungkin, saya biasanya menggunakannya dengan cara ini, tetapi demi penyeragaman dan keserasian silang pelayar, lebih baik untuk menentukannya sebelum membuka).

3.3. Dalam acara readystatechange, mula-mula tentukan sama ada respons diterima, dan kemudian tentukan sama ada pelayan berjaya memproses permintaan kod status bermula dengan 304 bermakna mendapatkannya cache. Kod menambah nombor rawak pada setiap permintaan, jadi nilai tidak akan diambil daripada cache, jadi tidak perlu menilai status ini.

4. Permintaan Ajax tidak boleh merentas domain!