原生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>
