jqueryajax的简单介绍
Jquery中常用的AJax的方法有哪几个
jQuery中ajax的4种常用请求方式：
1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。如果指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
实例：
保存数据到服务器，成功时显示信息。
$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, success: function (data) {
if (data != "") {
$("#pager").pager({
pagenumber: pagenumber, pagecount: data.split("$$")[1],
buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数
。如果需要在出错时执行函数，请使用 $.ajax。 实例：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
实例：
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("添加成功！");
}
}
)
4.通过 HTTP GET 请求载入 JSON 数据。
实例：
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cattagmode=anyformat=json
jsoncallback=?，前面加上http://", function(data){
$.each(data.items, function(i,item){
$("img/").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
JQuery 与ajax的关系
jquery是js编写的框架 可以方便的 实现复杂的效果。
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。它是轻量级的js库 ，兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本不再支持IE6/7/8浏览器。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
Jquery用ajax获取数据后在页面取不到，确定后台已经传数据过来了。
Jquery用ajax获取数据后在页面取不到，确定后台已经传数据过来了是设置错误造成的，解决方法为：
1、打开HBuilderX工具，创建Web项目，新建静态页面ajax.html。
2、打开已新建的ajax.html文件，引入jquery文件并修改title标签内容。
3、在body/body标签中，插入一个div标签，并在div标签中插入一个table。
4、接着在项目中的data文件夹下，新建user.json文件。
5、打开user.json文件，添加json格式数据。
6、在script/script标签中，jquery初始化函数，调用ajax()方法读取json文件数据；返回成功后，将数据渲染加到table中。
jquery中使用ajax的几种常用写法
第一种:
$.ajax({
????????????type:?"POST",?//提交方式?post?和?get
????????????url:?"连接地址",//连接地址
????????????data:?'{"'?+?+?'"}',//数据类型
????????????contentType:?"application/json;charset=utf-8",//编码形式
????????????dataType:?"json",?//提交数据类型
????????????success:?function?(data)?{
????????????????var?it?=?eval(data.d);
????????????????var?Html?=?"";
????????????????for?(var?i?in?it)?{}
???????????},?async:?false
????????});
第二种:
$(document).ready(function(){
??$("#a").click(function(){
??htmlobj=$.ajax({url:"/test.txt",async:false});
??$("#b").html(htmlobj.responseText);
??});
});
第三种:
$.ajax({?url:?"abc.html",?context:?document.body,?success:?function(){
????????$(this).addClass("Dmoe");
??????}});
??????
?????//参考文献：锋利的Jquery??如有疏漏或者错误?还望大家指出
jquery ajax请求的五个步骤
1、使用ajax发送数据的步骤
第一步：创建异步对象
var xhr = new XMLHttpRequest();
第二步：设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");
第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()
// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
第四步：设置请求体 send()
// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);
第五步：让异步对象接收服务器的响应数据
一个成功的响应有两个条件：
xhr.onreadystatechange = function(){ ?
????if(xhr.status == 200 xhr.readyState == 4){?
?????????console.log(xhr.responseText);?
?}
ajax-get方式请求案例：
var xhr = new XMLHttpRequest();?
xhr.open("get","validate.php?username="+name);?
xhr.send(null);?
xhr.onreadystatechange = function(){?
?????if(xhr.status == 200 xhr.readyState == 4){
??
?????????console.log(xhr.responseText);
????????????document.querySelector(".showmsg").innerHTML = xhr.responseText;;
?????????}
?}
ajax-post方式请求案例：
var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
// 判断服务器是否响应，判断异步对象的响应状态
if(xhr.status == 200 xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
二、Jquery中的Ajax
$.ajax({
type: "get",// get或者post
url: "abc.php",// 请求的url地址
data: {},//请求的参数
dataType: "json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了
timeout: 3000,//3秒后提示错误
beforeSend: function () {
// 发送之前就会进入这个函数
// return false 这个ajax就停止了不会发 如果没有return false 就会继续
},
success: function (data) { // 成功拿到结果放到这个函数 data就是拿到的结果
},
error: function () {//失败的函数
},
complete: function () {//不管成功还是失败 都会进这个函数
}
})
// 常用
$.ajax({
type: "get",
url: "",
data: {},
dataType: "json",
success: function (data) {
}
})
$.ajax() 都可以发
$.post(url,data,success,datatype):本质上只能发送post请求
$.get(url,data,success,datatype):本质上只能发送get请求