ホームページ  >  記事  >  ウェブフロントエンド  >  Ajaxリクエストテクノロジーに関する簡単な説明

Ajaxリクエストテクノロジーに関する簡単な説明

亚连
亚连オリジナル
2018-05-23 15:55:351632ブラウズ

ここで、ajax リクエストテクノロジーについて簡単に説明します。今からそれを皆さんと共有し、皆さんの参考にしてください。

1. 前に書かれている:

読書要件:

HTML、CSS、JavaScript、Json に関する一定の基礎知識があること

2. ajax とは何か×:つまり、「非同期」 「JavaScript And XML」(非同期 JavaScript および XML)とは、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。

3. ajax を使用する理由

動的 Web 開発テクノロジーでは、クライアント (通常はブラウザー) とサーバー間のデータ対話が非常に頻繁に行われるため、ネットワーク リソースを節約し、優れたユーザー エクスペリエンスを提供する方法が非常に重要です。 。 Ajax は非同期リクエスト メソッドを使用するため、ページ全体を更新せずにバックグラウンドでデータをやり取りしてコンテンツを更新できます...

4. ネイティブ ajax の使い方

ajax テクノロジーを使用する重要なポイントは XMLHttpRequest にあります。 (注: ie5 と ie6 は ActiveXObject を使用します) オブジェクトなので、このオブジェクトを上手に活用することが重要です 注:

function loadData() {
  //创建XMLHttpRequest对象
  var xmlHttpRequestObj = {};
  //创建json对象,传送json格式数据到服务端
  Var jsonObj = {};
  if (window.XMLHttpRequest) {
  // IE7+, Firefox, Chrome, Opera, Safari
     xmlHttpRequestObj =new XMLHttpRequest();
   } else {
     // IE6, IE5
     xmlHttpRequestObj =new ActiveXObject("Microsoft.XMLHTTP");
   }
  //当请求状态改变时会调用xmlHttpRequestObj .onreadystatechange方法
    xmlHttpRequestObj .onreadystatechange = function() {
     if (xmlHttpRequestObj .readyState == 0 ) {
      Alert(“open()函数未执行”);
       } else if(xmlHttpRequestObj.readyState == 1) {
        Alert(“open()函数已执行,send()函数未执行”);
     } else if(xmlHttpRequestObj.readyState == 2) {
        Alert(“send()函数已执行,头部和状态码可以获取”)
     } else if(xmlHttpRequestObj.readyState == 3) {
        Alert(“头部已收到,解析响应体”);
    } else if(xmlHttpRequestObj.readyState == 4) {
        Alert(“请求完成”);
        If (xmlHttpRequestObj.status == 200) {
          Alert(“响应就绪,反序列化json对象填充数据到页面”);
        } else if (xmlHttpRequestObj.status == 400) {
          Alert(“页面丢失”);
        } else {
          Alert(“服务异常”);
        }
    }
   }
  //method:请求方式:GET、POST、PUT、DELETE... Url:请求的地址 asnyc:是否采用异步
  xmlHttpRequestObj.open("method", "url", async);
  //设置请求头,POST请求格式需要载入,其他不需要
  xmlHttpRequestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  //请求数据,参数为jsonObj json对象
  xmlHttpRequestObj.send(jsonObj);
}
以上が皆さんの参考になれば幸いです。これからのみんな。

関連記事:

Ajaxローディングの菊ロード効果

Ajax+phpで商品分類の3階層連携を実現

Ajaxの技術構成と核原理分析

以上がAjaxリクエストテクノロジーに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。