浣跨敤AJAX璇锋眰JSON鏁版嵁鐨勪竴鑸楠ゅ涓嬶細

1. 鍒涘缓涓€涓猉MLHttpRequest瀵硅薄锛堜篃鍙互浣跨敤jQuery鐨?code>$.ajax鏂规硶锛夈€?/li>
2. 璁剧疆璇锋眰鏂规硶鍜孶RL銆傞€氬父浣跨敤GET鏂规硶鑾峰彇JSON鏁版嵁锛孶RL鏄寘鍚獼SON鏁版嵁鐨勬湇鍔″櫒绔祫婧愮殑鍦板潃銆?/li>
3. 璁剧疆璇锋眰澶达紝浠ョ‘淇濇湇鍔″櫒鍝嶅簲鐨勬槸JSON鏁版嵁銆傚彲浠ヤ娇鐢?code>xhr.setRequestHeader('Content-Type', 'application/json')銆?/li>
4. 璁剧疆鍥炶皟鍑芥暟鏉ュ鐞嗗搷搴斻€傞€氬父锛屽綋璇锋眰鎴愬姛瀹屾垚鏃朵細璋冪敤涓€涓?code>onreadystatechange鐨勪簨浠跺鐞嗙▼搴忥紝鍙互浣跨敤xhr.onreadystatechange = function() {...}銆傚湪鍥炶皟鍑芥暟涓紝鍙互閫氳繃xhr.readyState === 4鍜?code>xhr.status === 200鏉ユ鏌ヨ姹傛槸鍚︽垚鍔熷畬鎴愩€?/li>
5. 閫氳繃璋冪敤xhr.send()鏂规硶鍙戦€佽姹傘€?/li>

浠ヤ笅鏄竴涓娇鐢ㄥ師鐢烝JAX璇锋眰JSON鏁版嵁鐨勭ず渚嬩唬鐮侊細

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 鍦ㄨ繖閲屽鐞嗗搷搴旂殑JSON鏁版嵁
  }
};
xhr.send();

鍦ㄤ笂杩颁唬鐮佷腑锛岄€氳繃璋冪敤xhr.open鏂规硶鏉ヨ缃姹傛柟娉曞拰URL銆傜劧鍚庯紝閫氳繃xhr.setRequestHeader鏂规硶璁剧疆璇锋眰澶淬€傛帴涓嬫潵锛屼娇鐢?code>xhr.onreadystatechange鏉ヨ缃洖璋冨嚱鏁帮紝澶勭悊鍝嶅簲鐨凧SON鏁版嵁銆傛渶鍚庯紝閫氳繃璋冪敤xhr.send()鏂规硶鍙戦€佽姹傘€?/p>

璇锋敞鎰忥紝涓婅堪绀轰緥涓殑URL鏄浉瀵逛簬褰撳墠椤甸潰鐨勭浉瀵硅矾寰勩€備綘鍙互灏嗗叾鏇挎崲涓轰綘瀹為檯浣跨敤鐨刄RL銆?/p>