⑴ 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 问您解答。