JSON与AJAX基础-2

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_46143669

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量110

点赞数

分类专栏： JS学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46143669/article/details/106931885

版权

JS学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.jQuery的ajax方法
1.1 $.ajax()
只有一个键值对对象参数

$.ajax({
		//把所有的参数写在大括号中，省略了创建对象
		url:"ys/sliders.json",//请求地址
		type:"post",//请求方式
		async:true,//同步异步
		data:{},//传参用，如果是get，参数写在url后面；如果是post,参数写在send中
		dataType:"json",//规定服务端返回的数据类型，代替JSON.parse
		//省略了send请求
		success:function(imgData){//请求成功的回调，参数直接保存返回的数据，依然建议将渲染数据封装起来
			jQrenderDataToDom(imgData.slider);
		}
	});
	function jQrenderDataToDom(data){
		var str = "";
		$.each(data,function(index,value){
			str += '<a href="'+value.linkUrl+'"><img src="'+value.picUrl+'"></a>';
		});
		$("#banner_jq").html(str);
	}

1.2 jQuery load()方法
从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

必需的 URL 参数规定希望加载的 URL。

$("#div1").load("/statics/demosource/demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数中

$("#div1").load("/statics/demosource/demo_test.txt #p1");//url末尾用空格分隔选择器

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
回调函数可以设置不同的参数：（与上一篇第5点对应）
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);//xhr.status保存从服务器返回的数字代码，如404（未找到）和200（已就绪）
  });
});

在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。

1.3 $ .get()和$.post()方法
$.get()方法
通过HTTP GET请求从服务器上请求数据

$.get(URL,callback);

必需的URL参数规定希望请求的URL
可选的callback参数是请求成功后所执行的函数名

$("button").click(function(){
  $.get("demo_test.php",function(data,status){//第一个参数保存被请求页面的内容，第二个参数保存请求的状态
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.post()方法
通过HTTP POST请求从服务器上请求数据

$.post(URL,data,callback);

必需的URL参数规定希望请求的URL
可选的data参数规定连同请求发送的数据（传给服务器的数据）
可选的callback参数是请求成功后所执行的函数名

$("button").click(function(){
  $.post("demo_test_post.html",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },//连同请求（name 和 city）一起发送数据
  function(data,status){//第一个参数保存被请求页面的内容，第二个参数保存请求的状态
    alert("Data: " + data + "nStatus: " + status);
  });
});

两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST
GET-从指定的资源请求数据
POST-向指定的资源请求数据同时提交要处理的数据
GET基本上用于从服务器获得（取回）数据，它可能返回缓存数据（由于传给服务器的数据保存在URL中，所以在发送密码或其他敏感信息时绝不要使用 GET ）
POST也可用于从服务器获取数据，不过它不会缓存数据，并且常用于连同请求一起发送数据

1.4 $.getJson()方法
使用 AJAX 的 HTTP GET 请求获取 JSON 数据

$.getJSON(url,data,success(data,status,xhr));

url为必需参数，规定将请求发送到哪个URL
data为可选参数，规定发送到服务器的数据
success()为可选参数，规定当请求成功时运行的函数-data包含从服务器返回的数据，status包含请求的状态，xhr包含XMLHttpRequest对象

2.onreadystatechange 事件
当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应
每当readyState改变时，就会触发onreadystatechange事件在这里插入图片描述
readyState状态说明
　0：请求未初始化

此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。

1：服务器连接已建立

此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数（method,url,true）完成对象状态的设置。并调用send()方法开始向服务端发送请求。

值为1表示正在向服务端发送请求。

2：请求已接收

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。

值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。

3：请求处理中

此阶段解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。

状态3表示正在解析数据。

4：请求已完成，且响应已就绪

此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

xmlhttp.onreadystatechange=function()
  {//onreadystatechange事件会被触发 5 次（0 - 4），对应着readyState的每个变化
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

可以将创建对象、初始化请求、发送请求、状态请求变化函数封装在一起

var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/statics/demosource/ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

3.AJAX JSON实例
AJAX经常与按钮的click事件结合，所以可以封装成一个函数绑定给按钮

<html>  
<head>  
<meta content="text/html; charset=utf-8">  
<title>AJAX JSON by Javatpoint</title>  
<script type="application/javascript">  
function load()  
{  //封装为load函数
   var url = "http://date.jsontest.com/";//请求地址  
   var request;  
  //if语句测试浏览器版本并创建XHR对象
   if(window.XMLHttpRequest){    
    request=new XMLHttpRequest();
   }    
   else if(window.ActiveXObject){    
    request=new ActiveXObject("Microsoft.XMLHTTP");
   }    
   request.onreadystatechange  = function(){  //状态改变响应函数，发送请求后跟随响应状态会激发5次（0-4）
      if (request.readyState == 4  )  
      {  
        var jsonObj = JSON.parse(request.responseText);//将JSON文件转换为JS对象
        document.getElementById("date").innerHTML =  jsonObj.date;  
        document.getElementById("time").innerHTML = jsonObj.time;  
      }  
   }  
   request.open("GET", url, true);//初始化请求  
   request.send();//发送请求  
}  
</script>  
</head>  
<body>  
  
Date: <span id="date"></span><br/>  
Time: <span id="time"></span><br/>  
  
<button type="button" onclick="load()">Load Information</button>  
</body>  
</html>

weixin_46143669

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON与AJAX基础-2

1.jQuery的ajax方法1.1 $.ajax()$.ajax({ //把所有的参数写在大括号中，省略了创建对象 url:"ys/sliders.json",//请求地址 type:"post",//请求方式 async:true,//同步异步 dataType:"json",//规定服务端返回的数据类型，代替JSON.parse //省略了send请求 success:function(imgData){//请求成功的回调，参数直接保存返回的数据，依然建议将渲染数据封装
复制链接

扫一扫