ajax请求设置异步,AJAX异步请求

原生ajax操作

JavaScript 异步 GET请求

// 第一步：创建ajax对象

//判断用户的浏览器类型，决定使用何种方式ajax对象

if (typeof ActiveXObject != "undefined") {

var version = [

'Msxml2.XMLHTTP.6.0',

'Msxml2.XMLHTTP.5.0',

'Msxml2.XMLHTTP.3.0',

'Msxml2.XMLHTTP',

'Microsoft.XMLHTTP'

];

for (var i = 0; i <= version.length; i++) {

try {

var obj = new ActiveXObject(version[i]);

if (typeof obj != "undefined") {

break;

}

} catch(ex) {

}

}

} else {

var obj = new XMLHttpRequest();

}

// 感知ajax状态，当ajax状态改变是会触发事件onreadystatechange

obj.onreadystatechange = function(){

// 当前状态为4时，数据接收完毕

if (obj.readyState == 4 && obj.status == 200) {

// 输出响应信息

alert(obj.responseText);

}

}

// 设置GET传递的信息

var name = '小明';

// 处理中文乱码

name = encodeURIComponent(name);

// 第二步：创建一个HTTP请求，并设置"请求地址"及异步请求方式

obj.open("get", "./test.php?fname=" + name + "&addr=beijing", true);

// 第三步：发送请求

obj.send();

JavaScript 异步 POST请求

// 创建Ajax对象

//判断用户的浏览器类型，决定使用何种方式ajax对象

if (typeof ActiveXObject != "undefined") {

var version = [

'Msxml2.XMLHTTP.6.0',

'Msxml2.XMLHTTP.5.0',

'Msxml2.XMLHTTP.3.0',

'Msxml2.XMLHTTP',

'Microsoft.XMLHTTP'

];

for (var i = 0; i <= version.length; i++) {

try {

var obj = new ActiveXObject(version[i]);

if (typeof obj != "undefined") {

break;

}

} catch(ex) {

}

}

} else {

var obj = new XMLHttpRequest();

}

// 感知Ajax状态，当Ajax状态改变时会触发事件onreadystatechange

obj.onreadystatechange = function(){

// 当前状态为4时，数据接收完毕

if (obj.readyState == 4 && obj.status == 200) {

// 输出响应信息

alert(obj.responseText);

}

}

// 创建一个http请求，并设置“请求地址”及异步请求方式

obj.open("post", "./test.php");

// 设置HTTP头协议信息

obj.setRequestHeader("content-type", "application/x-www-form-urlencoded");

var info = "fname=" + "小明" + "&addr=beijing";

// 发送请求

obj.send(info);

jQuery-ajax操作

自行下载并引入jquery:

jQuery 异步 GET请求

// 1.直接请求

// $(function(){

// $.ajax("./test.php", {

// data:{name:"tom",age:23},

// success:function(msg){

// alert(msg);

// }

// });

// });

// 2.配置setting参数请求

// $(function(){

// $.ajax({

// type:"GET",

// url:"./test.php",

// data:{name:"tom", age:23},

// success:function(msg){

// alert(msg);

// }

// });

// });

// 3.通过$.ajaxSetup()方法预先设置全局参数

// $(function(){

// // 预先设置全局参数

// $.ajaxSetup({

// type:"GET",

// url:"./test.php",

// data:{name:"tom",age:23},

// success:function(msg){

// alert(msg);

// }

// });

// // 执行ajax操作，使用全局函数

// $.ajax();

// });

// 4.利用$.get()方法请求

//只发送get请求

// $(function(){

// $.get('./test.php');

// });

// 发送get请求并接受返回结果

// $(function(){

// $.get("./test.php", function(msg){

// alert(msg);

// });

// });

// 发送请求并传递数据

// $(function(){

// $.get("./test.php", {name:"tom",age:23}, function(msg){

// alert(msg);

// });

// });

// 发送get请求并传递数据，接受返回结果，显示返回格式

// $(function(){

// $.get("./test.php", {name:"tom",age:23}, function(msg){

// alert(msg.name + " " + msg.age);

// }, "json");

// });

// 使用$.getJSON()可以实现同样的功能

$.getJSON("./test.php", {name:"tom", age:23}, function(msg){

alert(msg.name + " " + msg.age);

});

jQuery 异步 POST请求

jquery-ajax发送post请求

Ajax无刷新评论

• 姓名：
• 评论：

// 1.使用$.post()方法发送post请求，与$.get()用法相同

// $(function(){

// $.post("./comment.php", {name:'tom',age:23}, function(msg){

// alert(msg.name + " " + msg.age);

// }, "json");

// });

// 2.使用全局ajax参数发送post请求

$(function(){

// 设置全局ajax

$.ajaxSetup({

url:"./comment.php",

type:"POST",

dataType:"json",

success:comment_add

});

// 添加按钮单击事件

$(":button").click(comment_send);

// 获得默认数据

$.ajax();

});

function comment_send(){

var name = $("#input_name").val();

var comment = $("#input_comment").val();

// 提交与获取数据

$.ajax({data:{name:name,comment:comment}});

}

function comment_add(data){

html = "

" + data.name + "" + data.comment + "";

$("table").append(html);

}

jQuery-ajax&php跨域请求问题

第一种方法JSONP

注意：JSONP只支持get请求

1.首先在jquery-ajax配置参数中添加这两项

dataType: "jsonp",

jsonp: "callback",

例如

$.ajax({

type: "GET",

url: "http://127.0.0.1/ajax2/serverjsonp.php?number=" + $("#keyword").val(),

dataType: "jsonp",

jsonp: "callback",

success: function(data) {

if (data.success) {

$("#searchResult").html(data.msg);

} else {

$("#searchResult").html("出现错误：" + data.msg);

}

},

error: function(jqXHR){

alert("发生错误：" + jqXHR.status);

},

});

2.然后，在php中做修改

$jsonp = $_GET["callback"];

echo $jsonp . '({"success":false,"msg":"参数错误"})'; //输出的字符串前面要拼接上jsonp

第二种方法XHR2

注意：其他浏览器都支持，但是IE必须得IE10以上，只需要服务端接口加上以下头信息

header('Access-Control-Allow-Origin:*'); //允许所有访问

header("Access-Control-Allow-Origin", "http://my.domain.cn:8080"); //只允许特定域名访问

header('Access-Control-Allow-Methods:POST,GET'); //允许跨域请求的方法，可以做限定

header('Access-Control-Allow-Credentials:true'); //请求的时候是否带上cookie信息

JavaScript-ajax请求xml数据

xml示例

wendy

35

Santa Fe

Yaphet

32

Balchik

Isaiah

35

Caldera

js示例

Ajax获取XML信息

function f1(){

// 创建Ajax对象

var obj = new XMLHttpRequest();

// 感知Ajax状态

obj.onreadystatechange = function(){

if (obj.readyState == 4 && obj.status == 200) {

// 获取XMLDocument对象

var xmlobj = obj.responseXML;

// 获取xml对象的第一个元素结点students

var students = xmlobj.childNodes[0];

// 获取元素结点students下所有的student的结点

var student = students.getElementsByTagName('student');

// 遍历student结点,并获得具体信息

var info = "";

for (var i = 0; i < student.length; i++) {

var name = student[i].getElementsByTagName('name')[0].firstChild.nodeValue;

var addr = student[i].getElementsByTagName('addr')[0].firstChild.nodeValue;

var age = student[i].getElementsByTagName('age')[0].firstChild.nodeValue;

// 拼接输出信息字符串

info += "姓名：" + name + "，地址：" + addr + "，年龄：" + age + "
";

}

// 将字符串写入到id名称为result的div字符串中

document.getElementById('result').innerHTML = info;

}

}

// 创建一个http请求，并设置“请求地址”

obj.open("get", "./test.xml");

//发送请求

obj.send();

}

Ajax获取XML信息