什么是Ajax
Jquery Ajax
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
数据类型
$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。
通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。
其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。
注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。
JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。
注意：JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax() 不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。
发送数据到服务器
默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。
高级选项
global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。
如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。
Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。
默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。
scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。
Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
$.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。
摘自： w3cSchool Ajax
常见用法
我的一个简单用法(OT 中微信插件)：
<button class="btn " type="button" οnclick="update('menu')" >生成自定义菜单</button>
<script type="text/javascript" charset="utf-8">
function update(type){
var url = "{:addons_url('Wechat://Wechatclass/update_wechat')}";
<span style="white-space:pre"> </span>$.post(
url,
{updateType:type},
function(data){
if (data){
alert(data);
}
else{
alert('faile');
}
});
}
</script>其他用法（TP365）：
function subRiqi(){
page = 1
$("#bankInfoModal").toggleClass("visible");
$(".popover").fadeOut(300);
activityDay = $("#statdate").val();
var actt = activityDay.substr(5);
$("#hdriqi").empty();
$("#hdriqi").append(actt);
if (activityDay == 0){
activityDay = "";
}
var html = "";
$.getJSON("{$site.WEBROOT}Preferential/index?countyId=" + countyId + "&indexSearchContent=" + indexSearchContent + "&indexCityId=" + indexCityId + "&storeSortId=" + storeSortId + "&page=" + page + "&activityDay=" + activityDay + "&specialDay=" + specialDay, function(data){
$(".home_information_list").empty();
$.each(data, function(i, item){
if (item.m_content != "折扣"){
if (item.bigCount > 1){
html += '<li>';
html += '<a class="km-listview-link" href={$site.WEBROOT}Preferential/storeBig?bigId=' + item.bigId + '><img class="goods" src="{$site.WEBROOT}' + item.store_icon + '"/>';
html += '<div class="info"><ul> <li class="dl_name middle"> ';
html += '<h1>' + item.store_name + '</h1><span class="deal_flag " >';
html += '<img id="type" style="position:relative;top:3px;" src="{$site.WEBROOT}' + item.store_sort_icon + '" height="16" /></span>';
html += '<span class="avatarBank"><div class="CMB" style="background: url({$site.WEBROOT}' + item.bank_icon + ');"></div></span>';
html += '<span class="discount"><h2 class="location"><span class="km-icon km-location km-notext">';
html += '</span>' + item.distance + 'KM</h2>' + item.m_content + '</span></li>';
html += '<li class="dl_address small"><h2>' + item.store_address.substr(0, 13) + '</h2></li></ul></div></a></li>';
} else{
html += '<li>';
html += '<a class="km-listview-link" href={$site.WEBROOT}Preferential/info?storeId=' + item.storeId + '><img class="goods" src="{$site.WEBROOT}' + item.store_icon + '"/>';
html += '<div class="info"><ul> <li class="dl_name middle"> ';
html += '<h1>' + item.store_name + '</h1><span class="deal_flag " >';
html += '<img id="type" style="position:relative;top:3px;" src="{$site.WEBROOT}' + item.store_sort_icon + '" /></span>';
html += '<span class="avatarBank"><div class="CMB" style="background: url({$site.WEBROOT}' + item.bank_icon + ');"></div></span>';
html += '<span class="discount"><h2 class="location"><span class="km-icon km-location km-notext">';
html += '</span>' + item.distance + 'KM</h2>' + item.m_content + '</span></li>';
html += '<li class="dl_address small"><h2>' + item.store_address.substr(0, 13) + '</h2></li></ul></div></a></li>';
}
} else{
if (item.bigCount > 1){
html += '<li>';
html += '<a class="km-listview-link" href={$site.WEBROOT}Preferential/storeBig?bigId=' + item.bigId + '><img class="goods" src="{$site.WEBROOT}' + item.store_icon + '"/>';
html += '<div class="info"><ul> <li class="dl_name middle"> ';
html += '<h1>' + item.store_name + '</h1><span class="deal_flag " >';
html += '<img id="type" style="position:relative;top:3px;" src="{$site.WEBROOT}' + item.store_sort_icon + '" height="16" /></span>';
html += '<span class="avatarBank"><div class="CMB" style="background: url({$site.WEBROOT}' + item.bank_icon + ');"></div></span>';
html += '<span class="discount"><h2 class="location"><span class="km-icon km-location km-notext">';
html += '</span>' + item.distance + 'KM</h2>' + item.m_rebate + '折</span></li>';
html += '<li class="dl_address small"><h2>' + item.store_address.substr(0, 13) + '</h2></li></ul></div></a></li>';
} else{
html += '<li>';
html += '<a class="km-listview-link" href={$site.WEBROOT}Preferential/info?storeId=' + item.storeId + '><img class="goods" src="{$site.WEBROOT}' + item.store_icon + '"/>';
html += '<div class="info"><ul> <li class="dl_name middle"> ';
html += '<h1>' + item.store_name + '</h1><span class="deal_flag " >';
html += '<img id="type" style="position:relative;top:3px;" src="{$site.WEBROOT}' + item.store_sort_icon + '" /></span>';
html += '<span class="avatarBank"><div class="CMB" style="background: url({$site.WEBROOT}' + item.bank_icon + ');"></div></span>';
html += '<span class="discount"><h2 class="location"><span class="km-icon km-location km-notext">';
html += '</span>' + item.distance + 'KM</h2>' + item.m_rebate + '折</span></li>';
html += '<li class="dl_address small"><h2>' + item.store_address.substr(0, 13) + '</h2></li></ul></div></a></li>';
}
}
});
$(".home_information_list").append(html);
});
}网上的：
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
Ajax.aspx：
jQuery 代码：Response.ContentType = " application/json " ;Response.Write( " {result: ' " + Request[ " Name " ] + " ,你好！(这消息来自服务器)'} " );
$.post( " Ajax.aspx " , { Action: " post " , Name: " lulu " }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. // this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this alert(data.result); }, " json " );
点击提交：
这里设置了请求的格式为"json"：
$.ajax()这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
这里有几个Ajax事件参数： beforeSend ， success ， complete ，error 。 我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。
type: ' POST ' ,
data:{Name: " keyun " },
dataType: ' html ' ,
timeout: 1000 ,
error: function (){alert( ' Error loading PHP document ' );},
success: function (result){alert(result);}
});
常见BUG
/**
* 插件显示内容里生成访问插件的url
* @param string $url url
* @param array $param 参数
*/
function addons_url($url, $param = array()){
$url = parse_url($url);
$case = C('URL_CASE_INSENSITIVE');
$addons = $case ? parse_name($url['scheme']) : $url['scheme'];
$controller = $case ? parse_name($url['host']) : $url['host'];
$action = trim($case ? strtolower($url['path']) : $url['path'], '/');
/* 解析URL带的参数 */
if(isset($url['query'])){
parse_str($url['query'], $query);
$param = array_merge($query, $param);
}
/* 基础参数 */
$params = array(
'_addons' => $addons,
'_controller' => $controller,
'_action' => $action,
);
$params = array_merge($params, $param); //添加额外参数
return U('Addons/execute', $params);
}public function execute($_addons = null, $_controller = null, $_action = null){
if(C('URL_CASE_INSENSITIVE')){
$_addons = ucfirst(parse_name($_addons, 1));
$_controller = parse_name($_controller,1);
}
$TMPL_PARSE_STRING = C('TMPL_PARSE_STRING');
$TMPL_PARSE_STRING['__ADDONROOT__'] = __ROOT__ . "/Addons/{$_addons}";
C('TMPL_PARSE_STRING', $TMPL_PARSE_STRING);
if(!empty($_addons) && !empty($_controller) && !empty($_action)){
$Addons = A("Addons://{$_addons}/{$_controller}")->$_action();
} else {
$this->error('没有指定插件名称，控制器或操作！');
}
} public function update_wechat() {
$update_type = I('get.updateType');
echo $update_type;
}
5680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
