⑴ js如何實現Ajax的請求函數
<scripttype="text/javascript">
//請求函數
functionf1(){
console.log('start');
//1.創建AJAX對象
varajax=newXMLHttpRequest();
//4.給AJAX設置事件(這里最多感知4[1-4]個狀態)
ajax.onreadystatechange=function(){
//5.獲取響應
//responseText以字元串的形式接收伺服器返回的信息
//console.log(ajax.readyState);
if(ajax.readyState==4&&ajax.status==200){
varmsg=ajax.responseText;
console.log(msg);
//alert(msg);
vardivtag=document.getElementById('result');
divtag.innerHTML=msg;
}
}
//2.創建http請求,並設置請求地址
varusername=document.getElementsByTagName('input')[0].value;
varemail=document.getElementsByTagName('input')[1].value;
username=encodeURIComponent(username);//對輸入的特殊符號(&,=等)進行編碼
email=encodeURIComponent(email);
ajax.open('get','response.php?username='+username+'&email='+email);
//3.發送請求(get--nullpost--數據)
ajax.send(null);
}
</script>
⑵ ajax與普通js有什麼區別，javascript和AJAX的區別
javascript是一種在客抄戶端執行的腳本語言。ajax是基於javascript的一種技術，它主要用途是提供非同步刷新（只刷新頁面的一部分，而不是整個頁面都刷新）。一個是語言,一個是技術,兩者有本質區別.
⑶ js如何通過Ajax的方式提交表單(注意不是以jquery而是以js原生代碼的方式提交)
ajax({
url:"",//請求地址
type:"POST",//請求方式
data:{name:"super",age:20},//請求參數
dataType:"json",
success:function(response,xml){
//此處放成功後執行的代碼
},
fail:function(status){
//此處放失敗後執行的代碼
}
});
functionajax(options){
options=options||{};
options.type=(options.type||"GET").toUpperCase();
options.dataType=options.dataType||"json";
varparams=formatParams(options.data);
if(window.XMLHttpRequest){
varxhr=newXMLHttpRequest();
}else{
varxhr=newActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
varstatus=xhr.status;
if(status>=200&&status<300){
options.success&&options.success(xhr.responseText,xhr.responseXML);
}else{
options.fail&&options.fail(status);
}
}
}
if(options.type=="GET"){
xhr.open("GET",options.url+"?"+params,true);
xhr.send(null);
}elseif(options.type=="POST"){
xhr.open("POST",options.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);
}
}
functionformatParams(data){
vararr=[];
for(varnameindata){
arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
}
arr.push(("v="+Math.random()).replace("."));
returnarr.join("&");
}
⑷ 原生js實現ajax封裝好怎麼使用
可以這樣
1varAjax={
//ajax模塊
init:function(obj){
//初始化數據
varobjAdapter={
url:'',
method:'get',
data:{},
success:function(){},
complete:function(){},
error:function(s){
alert('status:'+s+'error!');
},
async:true
}
//通過使用隨機字元串解決IE瀏覽器第二次默認獲取緩存的問題
objAdapter.url=obj.url+'?rand='+Math.random();
objAdapter.method=obj.method||objAdapter.method;
objAdapter.data=Ajax.params(obj.data)||Ajax.params(objAdapter.data);
objAdapter.async=obj.async||objAdapter.async;
objAdapter.complete=obj.complete||objAdapter.complete;
objAdapter.success=obj.success||objAdapter.success;
objAdapter.error=obj.error||objAdapter.error;
returnobjAdapter;
},
//創建XMLHttpRequest對象
createXHR:function(){
if(window.XMLHttpRequest){//IE7+、Firefox、Opera、Chrome和Safari
returnnewXMLHttpRequest();
}elseif(window.ActiveXObject){//IE6及以下
varversions=['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
for(vari=0,len=versions.length;i<len;i++){
try{
returnnewActiveXObject(version[i]);
break;
}catch(e){
//跳過
}
}
}else{
thrownewError('瀏覽器不支持XHR對象！');
}
},
params:function(data){
vararr=[];
for(variindata){
//特殊字元傳參產生的問題可以使用encodeURIComponent()進行編碼處理
arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
}
returnarr.join('&');
},
callback:function(obj,xhr){
if(xhr.status==200){//判斷http的交互是否成功，200表示成功
obj.success(xhr.responseText);//回調傳遞參數
}else{
alert('獲取數據錯誤！錯誤代號：'+xhr.status+'，錯誤信息：'+xhr.statusText);
}
},
ajax:function(obj){
if(obj.method==='post'){
Ajax.post(obj);
}else{
Ajax.get(obj);
}
},
//post方法
post:function(obj){
varxhr=Ajax.createXHR();//創建XHR對象
varopt=Ajax.init(obj);
opt.method='post';
if(opt.async===true){//true表示非同步，false表示同步
//使用非同步調用的時候，需要觸發readystatechange事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//判斷對象的狀態是否交互完成
Ajax.callback(opt,xhr);//回調
}
};
}
//在使用XHR對象時，必須先調用open()方法，
//它接受三個參數：請求類型(get、post)、請求的URL和表示是否非同步。
xhr.open(opt.method,opt.url,opt.async);
//post方式需要自己設置http的請求頭，來模仿表單提交。
//放在open方法之後，send方法之前。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(opt.data);//post方式將數據放在send()方法里
if(opt.async===false){//同步
Ajax.callback(obj,xhr);//回調
}
},
//get方法
get:function(obj){
varxhr=Ajax.createXHR();//創建XHR對象
varopt=Ajax.init(obj);
if(opt.async===true){//true表示非同步，false表示同步
//使用非同步調用的時候，需要觸發readystatechange事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//判斷對象的狀態是否交互完成
Ajax.callback(obj,xhr);//回調
}
};
}
//若是GET請求，則將數據加到url後面
opt.url+=opt.url.indexOf('?')==-1?'?'+opt.data:'&'+opt.data;
//在使用XHR對象時，必須先調用open()方法，
//它接受三個參數：請求類型(get、post)、請求的URL和表示是否非同步。
xhr.open(opt.method,opt.url,opt.async);
xhr.send(null);//get方式則填null
if(opt.async===false){//同步
Ajax.callback(obj,xhr);//回調
}
}
};
⑸ 解釋js ajax和cgi各是什麼工具在b/s中起什麼作用
名詞解釋：
js
javascript的簡稱。javascript是由網景公司出品的瀏覽器端腳本語言，用來實現瀏覽器端的交互功能開發。現已被標准化為ECMAScript。
ajax
ajax是Asynchronous Javascript And XML（非同步javascript及XML)的縮寫形式。是指一種創建互動式網頁應用的網頁開發技術。實際上傳輸的數據格式不僅僅是XML，還可以是json，binary等。
cgi
cgi是Common Gateway Interface（通用網關介面），是互聯網上網頁內容生成與應用的標准技術。可以簡單理解為伺服器根據瀏覽器的請求參數生成動態網頁的一種技術。
在b/s架構中的所扮演的角色
js
瀏覽器端的編程語言
ajax
瀏覽器端用以發起跟cgi通信的基礎api。
cgi是server端的處理請求及返回響應的伺服器進程。
綜述：
js是瀏覽器端實現動態性交互的基礎，沒有js的網頁只能是靜態網頁，所有的交互必須通過http請求重新刷新網頁。
ajax是實現網頁類富客戶端應用的前提條件。有了它網頁可以在不刷新網頁的基礎上跟後端伺服器進行數據交互。
cgi是處理客戶端或瀏覽器端請求的伺服器進程。我們用它來產生動態網頁內容。
⑹ js文件的ajax的url該怎麼寫
建議用jquery寫ajax，用原生js寫ajax難度有點大。
jQuery-AJAXget()和post()方法。沒使用緩存技術的話可以直接用post代替get。
Query$.post()方法
$.post()方法通過HTTPPOST請求從伺服器上請求數據。與$.get()方法的區別是$.post()可以發送參數到伺服器，伺服器進行處理後再放回數據
語法：$.post(URL,data,callback);
必需的URL參數規定您希望請求的URL。
可選的data參數規定連同請求發送的數據。
可選的callback參數是請求成功後所執行的函數名。
注意：
實例：
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"DonaldDuck",
city:"Duckburg"
},
function(data,status){
alert("Data:"+data+" Status:"+status);
});
});
程序員書庫w3c 問您解答。