Bagaimanakah Saya Boleh Mengautomasikan Interaksi Laman Web Didorong AJAX dengan Berkesan?

Memilih Kawalan yang Betul pada Tapak Dipacu AJAX

Menavigasi dan berinteraksi dengan tapak web dipacu AJAX boleh mencabar untuk skrip automatik. Berikut ialah panduan langkah demi langkah untuk mengautomasikan tapak web sedemikian dengan berkesan:

1. Perhatikan Tindakan Pengguna: Catatkan langkah manual yang anda ambil pada halaman, termasuk elemen utama yang diubah suai atau ditambah oleh JavaScript.
2. Kenal pasti Elemen Halaman: Gunakan alatan penyemak imbas seperti Firebug atau Alat Pembangun Chrome untuk periksa struktur halaman dan tentukan pemilih CSS/jQuery untuk elemen utama.
3. Memanipulasi Elemen Halaman: Gunakan jQuery dan alatan penyemak imbas lain untuk memanipulasi elemen HTML statik. Gunakan waitForKeyElements untuk mengendalikan elemen yang diubah secara dinamik oleh JavaScript atau AJAX.

Contoh Khusus: Skrip Auto-Beli Nike

Matlamat: Memilih saiz kasut tertentu, menambahkannya pada troli, dan meneruskan pembayaran pada setiap Halaman kasut Nike.

Langkah:

1. Pengenalpastian Elemen Utama:

   • Saiz Jatuh turun: div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
   • Sasaran Saiz Kasut: a:contains('10')
   • Add to Troli Butang: div.footwear form.add-to-cart-form div.product- pilihan div.add-to-cart
   • Butang Daftar Keluar: div.mini-cart div.cart-item-data a.checkout-button:visible

2. Jujukan Acara:

   • Aktifkan Saiz Jatuh turun
   • Pilih Saiz Kasut Sasaran
   • Tunggu Paparan Saiz Kasut dan Tambah ke Troli
   • Klik Butang Daftar Keluar

Skrip Lengkap:

// ==UserScript==
// @name     Nike Auto-Buy Shoes
// @include  http*://store.nike.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

var targetShoeSize = "10";

//-- Step 1: Activate Size Dropdown
waitForKeyElements(
  "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
  activateSizeDropdown
);

function activateSizeDropdown(jNode) {
  triggerMouseEvent(jNode[0], "mousedown");

  //-- Setup Step 2
  waitForKeyElements(
    "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
    selectDesiredShoeSize
  );
}

//-- Step 2: Select Target Shoe Size
function selectDesiredShoeSize(jNode) {
  if ($.trim(jNode.text()) === targetShoeSize) {
    //-- Trigger triplex event
    triggerMouseEvent(jNode[0], "mouseover");
    triggerMouseEvent(jNode[0], "mousedown");
    triggerMouseEvent(jNode[0], "mouseup");

    //-- Setup Steps 3 and 4
    waitForKeyElements(
      "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(" + targetShoeSize + ")')",
      waitForShoeSizeDisplayAndAddToCart
    );
  }
}

//-- Steps 3 and 4: Wait for Shoe Size Display and Add to Cart
function waitForShoeSizeDisplayAndAddToCart(jNode) {
  var addToCartButton = $(
    "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
  );
  triggerMouseEvent(addToCartButton[0], "click");

  //-- Setup Step 5
  waitForKeyElements(
    "div.mini-cart div.cart-item-data a.checkout-button:visible",
    clickTheCheckoutButton
  );
}

//-- Step 5: Click the Checkout Button
function clickTheCheckoutButton(jNode) {
  triggerMouseEvent(jNode[0], "click");
}

function triggerMouseEvent(node, eventType) {
  var clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent(eventType, true, true);
  node.dispatchEvent(clickEvent);
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengautomasikan Interaksi Laman Web Didorong AJAX dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!