jQuery实现Ajax请求

jQuery实现Ajax请求

最佳答案 53678位专家为你答疑解惑

jQuery实现Ajax请求

load方法load中只带url参数

$(function(){  $('#btnId').click(function(){    $('#divId').load('show.html');  })})

load中带三个参数 url data callback

$('#btnId').click(function(){  $('#divId').load(url,{"nickname":"draven"},function(responseText,status,xhr){    alert(responseText);    alert(status);  })})

$.get()

//get请求$('#btn1').click(function(){  $.get(url,{'name':'draven'},function(data,status){    $('#div1').html(data);})})

$.post()

//post请求$('#btn2').click(function(){  $.post(url,{'name':'draven'},function(data,status){    $('#div2').html(data);  })})

$.ajax()

$('#btn3').click(function(){  $.ajax({    type:"GET",//请求方式    dataType:"text",//返回的数据格式    url:"/writer/dravenxiaokai",//设置请求路径    data:"name=draven",//传递参数    success:function(data,status){//请求成功      $('#div3').html(data);//拿到数据    }  })})

原生javascript封装类似jquery的ajax请求跨域函数

在网上查看了很多js的ajax封装函数

发现大部分都没有实现跨域请求

所以跨域请求浏览器就会提示：No 'Access-Control-Allow-Origin' header is present on the requested resource.

于是封装了一个跨域请求的ajax函数：

js代码：

[html] view plain copy

function ajax(obj) { // 对实参处理 obj=obj || {}; // 定义局部变量 var xmlhttp, type, url, async, dataType, data; // 默认type为GET type=trim(obj.type).toUpperCase() || 'GET'; // 接口 url=trim(obj.url) || window.location.href; // 默认为异步请求 async=obj.async || true; // 设置跨域 dataType=trim(obj.dataType).toUpperCase() || 'HTML'; // 发送参数 data=obj.data || {}; // 删除左右空格 function trim(str) { return str.replace(/^\s+|\s+$/g, ""); }; // 定义格式化参数函数 var formatParams=function() { if (typeof(data)=="object") { var str=""; for (var pro in data) { str +=pro + "=" + data[pro] + "&"; } data=str.substr(0, str.length - 1); } if (type=='GET' || dataType=='JSONP') { if (url.lastIndexOf('?')==-1) { url +='?' + data; } else { url +='&' + data; } } } // 第一步，创建xmlhttprequest对象用来和服务器交换数据。 if (window.XMLHttpRequest) { //Chrome || Firefox xmlhttp=new XMLHttpRequest(); } else { //IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 跨域请求 if (dataType=='JSONP') { if (typeof(obj.beforeSend)=='function') obj.beforeSend(xmlhttp); var callbackName=('jsonp_' + Math.random()).replace(".", ""); var oHead=document.getElementsByTagName('head')[0]; data.callback=callbackName; var ele=document.createElement('script'); ele.type="text/javascript"; ele.onerror=function() { console.log('failed'); obj.error && obj.error("failed"); }; oHead.appendChild(ele); window[callbackName]=function(json) { oHead.removeChild(ele); window[callbackName]=null; obj.success && obj.success(json); }; formatParams(); ele.src=url; return; } else { formatParams(); // 第二步，打开链接 xmlhttp.open(type, url, async); // 设置响应头 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); if (typeof(obj.beforeSend)=='function') obj.beforeSend(xmlhttp); // 第三步，发送请求 xmlhttp.send(data); // 第四步，响应处理 xmlhttp.onreadystatechange=function() { if (xmlhttp.status !=200) { console.log(xmlhttp.status + 'failed'); obj.error && obj.error(xmlhttp.status + 'failed'); return; } if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (dataType=='JSON') { try { res=JSON.parse(xmlhttp.responseText); } catch (e) { console.log('json格式错误'); obj.error('json格式错误'); } } else if (dataType=='XML') { res=xmlhttp.responseXML; } else { res=xmlhttp.responseText; } obj.success && obj.success(res); } } } }

使用示例：

[html] view plain copy

ajax({ url: '', type: 'get', dataType: 'jsonp', success: function(data) { }, error: function() { } })