原生的Ajax
// 01 创建xhr对象 --XMLHttpRequest
var xhr = new XMLHttpRequest(); //0
// new ActiveXobject("Microsoft.HTTP")
// 02 初始化
xhr.open("get","test.txt",true); //1
// 03 发送
xhr.send(); //2
// 04 监听事件
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
if (xhr.status>=200&&xhr.status<300) {
console.log(xhr.responseText);
}
}
}
// 同源策略：同协议 同域名 同端口
// http://10.0.150.120:80
Ajax之load
// 01 ajax之load()
// 经常用于加载一段html代码
$("button").click(function(){
// $obj.load(url)
// url指的是服务器的一个html文件
// 功能：向服务器请求一段html代码加载到(appendTo)$obj
// $("#cont").load("load.html");
// $obj.load(url,回调函数)
// 回调函数可以在数据加载完毕之后进行一些处理
$("#cont").load("load.html",function(){
//给请求到的li添加边框
$("li").css("border","1px solid red");
})
})
Ajax之$.get()
//$.get() 全局函数
//$().css() $obj.load()
// jQuery $ 是构造函数
// 构造函数可以来创建实例
/*
function Dog(){
this.name = "旺财";
}
Dog.prototype.bark = function(){
console.log("汪汪汪");
}
var d = new Dog();
d.name;
d.bark();//原型方法 是可以对Dog的实例使用的 实例函数
// 函数也是一个对象
Dog.fn1 = function(){
console.log("我是添加到Dog这个函数上的属性");
}//fn1就是一个全局函数 静态属性（在其他面向对象语言中：类函数 类方法 ）
Dog.fn1();
d.fn1();//报错
function jQuery(){
}
$("#id").css() .attr() .prop() .children
$("#id").load()//jQuery的实例 jQuery对象
jQuery.get()
$.get() 全局函数 静态属性
$.post()
$.getScript()
$.getJSON()
$.ajax()
*/
/* 以“get”的方式向服务器请求数据
$.get(url,[data],[fn],[dataType])
url:请求文件的地址
data:请求参数{"userId":"123","pwd":"111"};
fn:回调函数
function(data,textStatus,jqxhr){}
dataType: "html|xml|json|script|text"
*/
/*
$.get("test.txt",function(data,textStatus,jqxhr){
// console.log(data);
// console.log(textStatus);//success |error |not found|notModified(没有修改)
// console.log(jqxhr);
if (textStatus=="success") {
console.log(data);
}
},"text");
*/
// t.php?id="1234"&pwd="123456"
/*
$("button").click(function(){
$.get(
"get_html.php",
{
"username":$("#name").val(),
"content":$("#cont").val()
},
function(data,textStatus,jqxhr){
if (textStatus=="success") {
$(data).appendTo("#msg");
}
},
"html"
);
})
*/
$("button").click(function(){
$.get(
"get_json.php",
{
"username":$("#name").val(),
"content":$("#cont").val()
},
function(data,textStatus,jqxhr){
if (textStatus=="success") {
console.log(data);
console.log(jqxhr);
$("<p>"+data.username+"</p>").appendTo("#msg");
$("<p>"+data.content+"</>").appendTo("#msg");
// $(data).appendTo("#msg");
}
},
"json"
);
})
// $.post(url,data,fn,dataType)
get与post方式的区别：
1.安全性。post的安全性高于get;如果以get方式请求，请求参数拼接 到url的后面，安全性低；以post方式请求，请求参数会包裹请求体中，安全性更高。
2.数量级的区别。get方式传输的数据量小，规定不能超过2kB,post方式请求数据量大，没有限制。
3.传输速度。get的传输速度高于post。
Ajax之$.getScript()
$.getScript(url,fn)
向服务器请求脚本文件
url:地址
fn:回调函数
function(){
//脚本文件加载完毕之后会调用
}
<script src="XX.js"></>
$("button").click(function(){
$.getScript("randomColor.js",function(){
$("body").click(function(){
$(this).css("background-color",randomColor());
})
})
})
Ajax之$.getJson()
// 请求json数据
// $.getJSON("url",data,fn)
// $.getJSON("ajaxTest.json",function(data){
// console.log(data);
// })
// js原生的jsonp 跨域请求
// 扩展的json --- json padding
// 第一步
var sc = document.createElement("script");
sc.setAttribute("type","text/javascript");
// cb=test "cb" 是跟服务器商量好的 test是自己定义函数名 注意=左右不可以加空格
sc.src = "http://localhost/day05Ajax/jsonp.php?cb=test"
document.body.appendChild(sc);u
// 第二步
function test(data){
console.log(data);
}
//jQuery的jsonp "cb"是和服务器商量好的 ?固定写就可以
$.getJSON("http://localhost/day05Ajax/jsonp.php?cb=?",function(data){
console.log(data);
})
Ajax之$.ajax
$.ajax({
url:请求地址,
type:"get|post|put|delete" 默认是get,
data: 请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html|text|json|xml|script",
success:function(data,dataTextStatus,jqXhr){},
error:function(jqXhr,textStatus,error){}
})
同源请求
$.ajax({
url:"my1.php",
type:"get",
dataType:"text",
success:function(data,textStatus,jqXhr){
console.log("____________成功_________");
console.log(data);
console.log(textStatus);
console.log(jqXhr);
console.log("______________________");
},
error:function(jqXhr,textStatus,error){
console.log("*************失败*********");
console.log(jqXhr);
console.log(textStatus);
console.log(error);
console.log("**************************");
}
})
// 不同源
$.ajax({
url:"http://localhost/day05Ajax/jsonp.php",
type:"get",
dataType:"jsonp",//使用jsonp 该项必须写
jsonp:"cb",//跟服务器端商量的key值
success:function(data,textStatus,jqXhr){
console.log(data);
},
})
