① ajax代码重复,怎么封装
/* ajax Post请求
* 服务器返回数据格式约定为 {success:true/false,message:'消息内容',data:'自定义数据'}
*/
function ajax (url, datas, cb) {
$.ajax({
type: "post",
async: true,
url: url,
data: datas,
success: function (result, textStatus, jqXHR) {
if (typeof result == "string")
result = JSON.parse(result);
if (result && result.result) {
result = result.result;
}else {
cb(result, textStatus, jqXHR);
}
},
error: function () {
/*如果请求失败,可以统一在这里处理*/
}
});
}
这样就封装了一个ajax 以post 请求的方法。调用:
ajax("/submit",{id:1,name:"2",sex:"1",fullname:"lisan"},function(result){ /*这里执行你请求成功后的逻辑*/ })
② ajax open其他服务器的URL
天互数据 为您解答,希望能帮到你,下面是代码仅供参看
var XMLHttp;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest();
}
else if(window.ActiveObject)
{
XMLHttp=new ActiveObject("Microsoft.XMLHttp");
}
}
function doAjax()
{
createXMLHttpRequest();
if(XMLHttp!=null)
{
XMLHttp.open("post", "login", true);
XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
XMLHttp.onreadystatechange=proc;
XMLHttp.send(null);
}
else
{
alert("不能创建xml对象");
}
}
function proc()
{
if(XMLHttp.readyState==4)
{
if(XMLHttp.status==200)
{
var sob=document.getElementById("login");
var str=XMLHttp.responseText;
if(str!=0)
{
parent.frames["b_frame"].document.getElementById("login").innerHTML = "success!!!";
}
else
{
parent.frames["b_frame"].document.getElementById("login").innerHTML = "error!!!";
}
}
}
}
③ 如何把ajax从服务器接收的数据封装成网页的形式
可以的 你在回调函数那里面不是有个后台返回的结果吗 你可以选择者后台把这个结果封装成一个html或者是在前台 反正都是一样的 然后把这个结果弹出来 就等于是在操作一个页面了
④ 利用AJAX技术在服务器和客户端交互数据时,可通过两种方式来封装数据,分别是和
交互方式是post和get。json和xml是用来表示数据的格式。比如你服务器要传数据给安卓客户机就可以用json格式的数据。。这样安卓才能解析你传给他的数据
⑤ jquery封装的ajax怎么使用
s = {type : 'POST',
url : xxx,
data : {},
async : true,
success : function(result) {
alert(1111)
},
Callback:function(){
alert(2222)
}
}
var _ajax = $.ajax;
$.ajax = function (s) {
var old = s.success;
s.success = function (data, textStatus, jqXHR) {
alert(333)
if (data && data.IsLogout) {
eval(data.Callback);
}
if (old) {
old(data, textStatus, jqXHR);
}
};
_ajax(s);
};
$.ajax(s);开始,跳进你自定义的$.ajax = fuc/.....;
var old = s.success;
将 function(result) {
alert(1111)
};
赋值给 old。这是为了保存之前定义的success
s.success = function (data, textStatus, jqXHR) {
alert(333)
if (data && data.IsLogout) {
eval(data.Callback);
}
if (old) {
old(data, textStatus, jqXHR);
}
};
自己封装一个方法。并修改参数s的success,让ajax执行完成之后执行这个方法而不是之前的alert(111)
_ajax(s);执行原生的ajax跳到指定的页面。
成功后跳到 s.success = function (data, textStatus, jqXHR) {
alert(3333)
if (data && data.IsLogout) {
eval(data.Callback);
}
if (old) {
old(data, textStatus, jqXHR);
}
};
最后会依次弹出 3333 2222 1111
⑥ ajax地址在服务器中要怎样修改
你写成绝对路径名试试,可能没有找到部署的地址
⑦ ajax的url地址可以是本地的服务端吗
用火狐的插件 filebug 查看 控制器 有没有错误。
⑧ 怎么封装一个公共的ajax请求
s = {type : 'POST',
url : xxx,
data : {},
async : true,
success : function(result) {
alert(1111)
},
Callback:function(){
alert(2222)
}
}
var _ajax = $.ajax;
$.ajax = function (s) {
var old = s.success;
s.success = function (data, textStatus, jqXHR) {
alert(333)
if (data && data.IsLogout) {
eval(data.Callback);
}
if (old) {
old(data, textStatus, jqXHR);
}
};
_ajax(s);
};
$.ajax(s);开始,跳进你自定义的$.ajax = fuc/.....;
var old = s.success;
将 function(result) {
alert(1111)
};
赋值给 old。这是为了保存之前定义的success
s.success = function (data, textStatus, jqXHR) {
alert(333)
if (data && data.IsLogout) {
eval(data.Callback);
}
if (old) {
old(data, textStatus, jqXHR);
}
};
自己封装一个方法。并修改参数s的success,让ajax执行完成之后执行这个方法而不是之前的alert(111)
_ajax(s);执行原生的ajax跳到指定的页面。
成功后跳到 s.success = function (data, textStatus, jqXHR) {
alert(3333)
if (data && data.IsLogout) {
eval(data.Callback);
}
if (old) {
old(data, textStatus, jqXHR);
}
};
⑨ 如何封装ajax函数
用ajax的局部刷新来给网站提升用户体验我们已经用过很多了,ajax已然成为了前端开发最重要的“工具”之一。
但是,我想应该会有不少人在使用ajax的时候都在依赖于jQuery或者prototype或者其他js库。但现实是,假设某一天一个项目不能引入任何一个js库,只能用原生js写代码,那你怎么办?又或者是一个非常简单的页面,但是要用到ajax,难道就为了下这么一个ajax请求要引用一个jq这么大的js库?我想这是不值得的,所以我们应该学会用原生的js来写ajax,并且把它封装好以便于以后使用。
由于之前使用过jq的ajax而且觉得他使用起来挺舒服的,所以我在封装ajax的时候一方面舍去了很多不常用的参数只留下了最常用的几个功能,另一方面尽量保持它原有的使用风格。
我一共只留了五个参数,他们分别是发送方式(type)、发请求的url(url)、是否为异步请求(async)、发送的参数(data)、传输成功的回调函数(success),函数代码如下:
/* 封装ajax函数
* @param {string}opt.type http连接的方式,包括POST和GET两种方式,默认使用GET
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
* @param {object}opt.data 发送的参数,格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数 */
function ajax(opt) {
opt = opt || {};
var type = opt.type || 'GET';
type = type.toUpperCase() || 'GET';
var url = opt.url || '';
var async = opt.async || true;
var data = opt.data || null;
var success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in data){
params.push(key + '=' + data[key]);
}
var dataStr = params.join('&');
if (type === 'POST') {
xmlHttp.open(type, url, async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(dataStr);
}
else {
xmlHttp.open(type, url + '?' + dataStr, async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
success(xmlHttp.responseText);
}
};
}
以对象的形式做函数的参数还是比较灵活的,不用拘泥于参数个数的问题。但这容易出现一个问题,就是使用参数的时候很有可能参数没给却在函数内部使用了,比如在调用函数时忘了写success回调函数,而定义的时候却用到了他,这就会报错了,因为success是undefined了。所以为了避免这种情况我觉得最好在封装函数的时候尽量给每一个参数一个默认值,如果调用的时候未给出某个参数那么他就使用默认值代替,这样就不会出现上述情况了。
接下来下面是创建XMLHttpRequest对象,写了两种创建方式是为了兼容IE才有的写法,旧版本的IE浏览器不支持XMLHttpRequest构造函数,IE有他自己独特的构造函数来支持ajax那就是ActiveXObject构造函数。
创建好了XMLHttpRequest对象,接下来写的是对发送参数data的转换,在使用ajax函数的时候data也用json的数据格式会有一种亲切感,因为大部分ajax传输的时候返回数据都使用json格式,所以发送的时候也使用json格式显得很友好。这里需要将{a: b, c: d}的格式转换为a=b&c=d的格式。
然后是对"POST"和"GET"两种不同的发送方式做处理。GET方法比较简单,直接把整理好的数据接在open方法的url参数的后面就行了(要记得在url后面加上"?"),send方法也不用带参数了,因为参数已经在url后面带着发过去了,所以send方法的参数直接给个null;POST方法这里有个坑,如果不注意可能会很烦恼为什么会得不到想要的结果,那就是需要设定Content-Type头信息,模拟HTTP的POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。send方法中参数的提交格式和GET方法中url的写法一样,也是a=b&c=d格式。注意open方法必须放在设定头信息的前面,否则也会报错。async参数可以是true也可以是false,true代表使用异步方式调用,false代表使用同步方式调用,理所当然使用ajax是一定用异步的,这里只是提供一个选择,而且他的默认值也是true。
最后需要注册一个onreadystatechange事件,当XMLHttpRequest对象的readyState属性等于4了(代表收到完整的服务器响应了),同时status属性等于200(代表服务器响应的状态值为OK,状态正常)就可以判定这次ajax从发送过程到响应过程全程传输成功了,我们可以对返回的数据做一些处理,把要处理的代码写在success函数中,ajax成功就会调用之。
// 使用示例
ajax({
method: 'POST',
url: 'test.php',
data: {
name1: 'value1',
name2: 'value2'
},
success: function (response) {
// codes here
}
});
这个ajax函数很简单代码量也很少,已经基本满足我的日常使用需求了,以后使用也不用依赖js库或者每次写一遍了。如果以后还有更多其他功能要使用,再往里面加。
⑩ javascript使用ajax请求数据的url所指向服务器端文件是怎样的
回答你的
问题1:但是不知道这个链接所指向的文件是用什么语言写的?
答:php语言、asp语言、java等服务器端脚本语言
问题2:js的ajax请求支持什么样格式的文件?
答:我想你问的是发送的ajax请求的数据类型吧?也就是你上面例子中的data,
这个是有三种
{
1.text文本类型(即普通字符串)
2.xml
3.json
}
问题3:然后怎么向我使用apache创建的web网站请求到数据?
答:
ajax_demo01.html文件
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>ajax无刷新弹窗</title>
<scripttype="text/javascript"src="./public.js"></script>
<scripttype="text/javascript">
/*动态绑定事件*/
window.onload=function(){
$('btn').onclick=function(){
//1.创建Ajax对象
varxhr=createXhr();
//2.初始化
xhr.open('get','ajax_demo01.php');
//3.当状态码发生改变时,自动执行的回调函数
xhr.onreadystatechange=function(){
//判断状态码变化值
if(xhr.readyState==4){
//状态接收完毕时,弹出内容字符串
alert(xhr.responseText);
}
;
}
//4.发送Ajax请求(由于是get请求,所以,请求数据在url,这里传Null)
xhr.send(null);
}
}
</script>
</head>
<body>
<inputtype="button"id="btn"value="确定">
</body>
</html>
自己封装的public.js文件
functioncreateXhr(){
try{
returnnewXMLHttpRequest();
}catch(e){
}
try{
returnnewActiveXObject('Microsoft.XMLHTTP');
}catch(e){
}
alert("Ajax对象由于浏览器罕用而创建失败");
}
function$(id){
returndocument.getElementById(id);
}
ajax_demo01.php文件
<?php
echo"helloajax";