學(xué)node.js教程用ajax向服務(wù)器請求數(shù)據(jù)巧骚，研究了半天發(fā)現(xiàn)jquery ajax方法這東西我用過啊，用之前寫的wikipedia搜索程序整理下吧
ajax() 方法通過 HTTP 請求加載遠程數(shù)據(jù)帝簇，執(zhí)行AJAX異步HTTP請求。
首先，要先加入
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
然后是AJAX的各種參數(shù)
參數(shù)
1. url：
類型為string，是發(fā)送請求的地址删咱，像是Wikipedia提供的API中
url:"https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch="+searchwords+"&prop=info&inprop=url&utf8=&format=json"
就是請求搜索serachword時返回的各種信息
2.type：
類型為string，請求方式 是"POST" 或 "GET"豪筝， 默認為 "GET"痰滋。
3.data
可以是對象也可以是string，發(fā)送到服務(wù)器的數(shù)據(jù)续崖，比如我們利用 http.createServer(function(req,res)建立服務(wù)器敲街，req可以接收傳遞的數(shù)據(jù)
4.dataType
類型是string，預(yù)期服務(wù)器返回的數(shù)據(jù)類型
5.success
請求成功時執(zhí)行的回調(diào)函數(shù)严望，function(data,textStatus）返回的數(shù)據(jù)和返回的狀態(tài)
6.error
這個方法有三個參數(shù)：XMLHttpRequest 對象多艇，錯誤信息，（可能）捕獲的錯誤對象像吻。function (XMLHttpRequest, textStatus, errorThrown)
那其實知道ajax基本形式之后構(gòu)建一個wiki搜索十分的簡單
頁面部分不多談峻黍，想怎么寫怎么寫，主界面有一個input拨匆，一個search的按鈕姆涩，結(jié)果頂部一個input和按鈕用于繼續(xù)搜索和顯示
按鈕綁定的onclick響應(yīng)函數(shù)為
function SearchResult()
{
$ (".main").addClass("hidden");
//hidden 類中，display的值為none惭每，也即點擊按鈕后主界面不顯示骨饿，顯示結(jié)果界面
$ (".result").removeClass('hidden');
var words=$("#search").val();
//獲取搜索的詞
$('#search2').val(words);
//將搜索的詞顯示在結(jié)果界面的input標簽中
$.ajax({
url:"https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch="+words+"&prop=info&inprop=url&utf8=&format=json",
dataType:"JSONP",
success:function(data)
{
var search=data.query.search;
//返回的是一個searchlist，包含了是個相關(guān)詞
for(var i=0;i<10;i++)
{
var title=data.query.search[i].title;
var title2=title.replace(/ /g,"_");
var url="https://en.wikipedia.org/wiki/"+title2;
var snippet=data.query.search[i].snippet;
//wiki api返回的基本信息中連html格式都給你了
$(".ResultContent").append("<div class='result-list Result-"+i+"'><a href="+url+">"+title+"</a><br><div class='result-snippet snippet-" + i + "'></div></div>")
$(".snippet-"+i).html(snippet);
//每收到一條信息，在界面中添加一個div
}
}
})
}
除此之外宏赘，還有隨機顯示詞條的功能绒北，定義一個按鈕
<button class="button_box" id="button1" onClick="javascript:window.location.>Random</button>
完成
codepen:https://codepen.io/bigbybear469/pen/LBVeeo
