ajax简单介绍

标签：

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。

ajax特性介绍：

function (XMLHttpRequest) {

         this; // the options for this ajax request
         }

function (XMLHttpRequest, textStatus) {

         this; // the options for this ajax request
         }

function (XMLHttpRequest, textStatus, errorThrown) {

         // 通常情况下textStatus和errorThown只有其中一个有值 
         this; // the options for this ajax request
         }

function (data, textStatus) {

         // data could be xmlDoc, jsonObj, html, text, etc...
         this; // the options for this ajax request
         }

ajax的几种写法：

1.

<script language="javascript" type="text/javascript">  
        $.ajax({
            type: "post",
            contentType: "application/json",
            url: "请求访问地址，例如：Admin/index",
            data: "{需要传递的参数，例如：id:‘" + $("#id").val() "‘}",  //切记字符串拼接时注意不要少了引号，不然是请求不到指定连接的
            datatype: ‘json‘,  //返回数据类型            
            success: function(data) {
                  var strhtml = "";

　　　　　　//此处做做字符串拼接，把取出来的数据展示在前台页面中！如下：

for (var i = 0; i < data.length; i++) {
Htmls = Htmls + "<div id=\"p_" + i + "\" class=\"Publish\"><a href=\"javascript:;\">"
+ "<h3>"
+ "<p> "
+ "<i><img src=\"../Content/Images/rl_pic5.jpg\" /></i>"
+ "<em>"
+ data[i].Finance_Title
+ "</em>"
+ "<b>"
+ ChangeDateFormats(data[i].Finance_Time) + " " + ChangeDatehh(data[i].Finance_Time) + ":" + ChangeDatemm(data[i].Finance_Time)
+ "</b>"
+ "</p>"
+ "<span>"
+(data[i].Finance_Importance=="低"?"<img src=\"../Content/Images/rl_pics.jpg\" /><img src=\"../Content/Images/rl_pics2.jpg\" /><img src=\"../Content/Images/rl_pics2.jpg\" /></span>":data[i].Finance_Importance=="中"?"<img src=\"../Content/Images/rl_pics.jpg\" /><img src=\"../Content/Images/rl_pics.jpg\" /><img src=\"../Content/Images/rl_pics2.jpg\" /></span>":"<img src=\"../Content/Images/rl_pics.jpg\" /><img src=\"../Content/Images/rl_pics.jpg\" /><img src=\"../Content/Images/rl_pics.jpg\" /></span>")
+ "</h3>"

+ "<ul>"
+ "<li>"
+ "<p>当前值</p>"
+ "<span>"
+ data[i].Finance_Before
+ "</span>"
+ "</li>"

+ "<li>"
+ "<p>预测值</p>"
+ "<span id=\"fp_" + i + "\" >"
+ (data[i].Finance_Prediction == "" ? "--" : data[i].Finance_Prediction)
+ "</span>"
+ "</li>"

+ "<li class=\"c_red\">"
+ "<p>公布值</p>"
+ "<span id=\"fr_" + i + "\" >"
+ (data[i].Finance_Result == "" ? "<img src=\"../Content/Images/loading.gif\" /> 侦测中" : data[i].Finance_Result)
+ "</span>"
+ "</li>"

+ "<li>"
+ "<p>变化</p>"
+ (data[i].Finance_Change == "" ? " <span id=\"fc_" + i + "\" class=\"bh\">--</span>" : (data[i].Finance_Change.substring(0, 1) == "+" ? "<span id=\"fc_" + i + "\" class=\"bh\">" + data[i].Finance_Change + "</span>" : "<span id=\"fc_" + i + "\" class=\"bh_x\">" + data[i].Finance_Change + "</span>"))
+ "</li>"

+ "</ul>"
+ "</a></div>";
}

                })      
                $("#liststr").html(strhtml);

            },
            error: function(err) {
                alert(‘数据没有请求到‘);
            }
        });

</script>

2.

<script language="javascript" type="text/javascript">  

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",function(req){
    $.each(req.items,function(i, item){
        if(i == vnum){
            $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
        }
    });
});

</script>

ajax简单介绍

标签：

原文地址：http://www.cnblogs.com/AndyCf/p/4949869.html