ホームページ > 記事 > ウェブフロントエンド > jsを使ってjsonを呼び出す方法
この記事では、js 呼び出し json メソッドの概要を詳細に分析します。必要な友達は参考にしてください。
Ajaxの基本
ajax: リフレッシュデータの読み取りなし、サーバー上の情報の読み取り
HTTPリクエストメソッド:
GET: 投稿の閲覧など、データの取得に使用されます
ajax.judgeXmlHttpRequest('get', 'index.php', function(data){ alert(data); //这是服务器返回的数据 })
POST: データのアップロードに使用されます、ユーザー登録など
var dataJson = { name: 'ys',age: 123 } ajax.judgeXmlHttpRequest('post', 'index.php', function(data){ alert(data); //这是服务器返回的数据 },dataJson)
GETとPOSTの違い:
GET: URLを介して渡されます(URLに入れられます)、渡されたデータはURLに配置されます、name = value & name = value
get メソッドは容量が小さく、セキュリティが低く、キャッシュがあります
POST: URL を経由しません
投稿容量は大きく、通常最大 2G、セキュリティは比較的高く、キャッシュはありません
ネイティブAjaxの書き込み
Ajaxの操作手順
Ajaxオブジェクトの作成
IE6以外のブラウザ:
var oAjax=new XMLHttpRequest();
IE6ブラウザ:
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
サーバーに接続
Ajax.open(方法,文件名,异步传输);
ブロックキャッシュメソッド:
Ajax.open('GET','a.txt?t='+new Date().getTime(),true);
同期: js中指 物事は 1 つずつ行う必要があります
非同期: js は、一緒に実行する必要がある複数のことを指します
ajax は、同期ではなく非同期送信用です
リクエストを送信します
Ajax.send();
戻り値を受信します
リクエストステータス監視: onreadystatechange イベント: Ajax とサーバー間の通信があるときにトリガーされます。終了はステータス属性によって判断されます
readyState 属性によって判断されます
。 0 (初期化されていない)、open メソッドはまだ呼び出されていません
1 (ロード中) send() メソッドが呼び出され、リクエストが送信中です
2 (ロード完了) send() メソッドが完了し、すべての対応するコンテンツを受信しました
3 (解析中) 受信した応答コンテンツを解析中です
4 (完了) 応答コンテンツの解析が完了し、クライアントで呼び出すことができます (完了は必ずしも成功するとは限らず、検出するにはステータスが必要です)成功または失敗)
status 属性:
リクエストの結果、成功 (200) か失敗 (404) か:Ajax.status==200
戻り値 responseText:
サーバーから返されたテキスト: Ajax.responseText (戻り値は文字列ですが、場合によっては他の形式にさらに処理する必要があります)
oAjax.onreadystatechange=function(){ //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了 if(oAjax.readyState==4){ //读取完成 if(oAjax.status==200){ //读取的结果是成功 alert('成功:'+oAjax.responseText); } } }
カプセル化されたネイティブ Ajax を関数に変換して使用します。最終的に記述されたネイティブ Ajax は次のとおりです。
GET メソッドによってカプセル化された関数は次のとおりです。 :
function ajax(url,fnSuccess,fnFaild){ //1.创建Ajax对象。js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined。IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用 if (window.XMLHttpRequest) { var oAjax=new XMLHttpRequest();//非IE6 }else{ var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6 } //2.连接到服务器 oAjax.open('GET',url,true); //3.发送请求 oAjax.send(); //4.接收返回值 oAjax.onreadystatechange=function(){ //oAjax.readyState--浏览器和服务器之间进行到哪一步了 if(oAjax.readyState==4){ //读取完成 if(oAjax.status==200){ //读取的结果是成功 fnSuccess(oAjax.responseText); //成功时执行的函数 }else{ if(fnFaild){ //判断是否传入失败是的函数,即用户是否关心失败时的结果 fnFaild(oAjax.responseText); //对失败的原因做出处理 } } } } }
POST メソッドによってカプセル化された関数は次のとおりです:
function ajaxPost(url,id,fnSuccess,fnFaild){ //1.创建Ajax对象 if (window.XMLHttpRequest) { var xhr=new XMLHttpRequest();//非IE6 }else{ var xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE6 } //2.连接到服务器 xhr.open("POST",url,true); //设置头信息 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); var form=document.getElementById(id); //3.发送请求,传递数据 xhr.send(serialize(form)); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) { fnSuccess(xhr.responseText); }else{ fnFaild(xhr.responseText); } } }; }
文字セット エンコーディング: Web ページと要求されたファイルのエンコーディングは同じである必要があります。すべて utf8 の場合
キャッシュ、キャッシュを防止します (頻繁に変更されるデータなどはキャッシュできません。主に GET メソッドに使用されます)、パラメーターを渡すときに、パスの後に ?+'変数データ' を追加します。元のデータには影響しません
ajax('a.txt?t='+new Date().getTime(),function(str){ alert(str); },function(str){ alert(str); });
ajax リクエストの動的データ: jsonファイル
1 ajaxの戻り値は文字列で、返された配列/jsonデータはeval変換で読み込むことができます
alert(str); alert(typeof(str)); var arr=eval(str); alert(typeof(arr)); alert(arr[1]); alert(arr[1].c);
2 DOMと組み合わせて表示用の要素を作成します 返される内容
oBtn.onclick=function(){ ajax('data/arr3.txt?t='+new Date().getTime(),function(str){ var arr=eval(str); for (var i = 0; i < arr.length; i++) { var oLi=document.createElement('li'); oLi.innerHTML='用户名:<span>'+arr[i].user+'</span>密码:<span>'+arr[i].pass+'</span>'; oUl.appendChild(oLi); } },function(str){ alert(str); }); }
データ型-->返されるデータ型は、xml (ほぼ廃止)、json (現在は一般的に使用されています) の場合があります。
最近、get メソッドを通じて json を呼び出すネイティブ js を作成した例を見てみましょう:
if(!isNaN(matchId)) { var xmlHttp = null; try {// Chrome, Firefox, Opera, Safari xmlHttp = new XMLHttpRequest(); }catch (e) { try {// Internet Explorer IE 6.0+ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try {// Internet Explorer IE 5.5+ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("your browser not support ajax!"); } } } window.onload = function () { xmlHttp.open("get",/api/clientMatch/commonMatchDiagram.json?matchId=" + matchId,true); xmlHttp.send(); xmlHttp.onreadystatechange = doResult; //设置回调函数 }; function doResult() { var html=''; if ((xmlHttp.readyState == 4)&&(xmlHttp.status == 200)) {//4代表执行完成,200代表执行成功 var data = JSON.parse(xmlHttp.responseText); if(data.code == 200){ //代码执行 } document.getElementById('appMatch').innerHTML = html; } } }
上記は、将来的に皆さんのお役に立てば幸いです。
関連記事:
ES6でのマップ、セット、配列、オブジェクトの比較(詳細なチュートリアル)
以上がjsを使ってjsonを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。