原生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: <script src="./jquery.min.js"></script>
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请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery-ajax发送post请求</title>
</head>
<body>
<div>Ajax无刷新评论</div>
<ul>
<li>姓名：<input type="text" id="input_name" /></li>
<li>评论：<input type="text" id="input_comment" /></li>
</ul>
<input type="button" value="发表评论" />
<table border="1"></table>
<script src="./jquery.min.js"></script>
<script>
// 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 = "<tr><td>" + data.name + "</td><td>" + data.comment + "</td></tr>";
$("table").append(html);
}
</script>
</body>
</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示例
<?xml version="1.0" encoding="UTF-8" ?>
<students>
<student>
<name>wendy</name>
<age>35</age>
<addr>Santa Fe</addr>
</student>
<student>
<name>Yaphet</name>
<age>32</age>
<addr>Balchik</addr>
</student>
<student>
<name>Isaiah</name>
<age>35</age>
<addr>Caldera</addr>
</student>
</students>
js示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ajax获取XML信息</title>
<script>
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 + "<br />";
}
// 将字符串写入到id名称为result的div字符串中
document.getElementById('result').innerHTML = info;
}
}
// 创建一个http请求，并设置“请求地址”
obj.open("get", "./test.xml");
//发送请求
obj.send();
}
</script>
</head>
<body>
<h2>Ajax获取XML信息</h2>
<div id="result"></div>
<input type="button" onclick="f1();" value="触发" />
</body>
</html>
