Ajax原理与Json数据的操作

最新推荐文章于 2023-04-15 09:34:36 发布

道而起

最新推荐文章于 2023-04-15 09:34:36 发布

阅读量402

点赞数 1

文章标签： ajax json javascript

本文链接：https://blog.csdn.net/weixin_45539338/article/details/124637788

版权

本文介绍了Ajax的基本概念和原理，包括ReadyState属性和status状态码。详细讲解了使用Ajax操作Json数据，阐述了Json的定义和两大核心类JsonObject与JsonArray。通过jQuery展示了Ajax的简单用法，并提供了Ajax发送Json数据的示例。

摘要由CSDN通过智能技术生成

Ajax如何操作Json数据

文章目录

Ajax如何操作Json数据
Ajax的概念
一、Ajax的原理
- - ReadyState：是描述服务器的状态的属性
  - status:得到服务器的响应状态码
- jQuery中的Ajax的写法
二、使用Ajax操作Json数据
小结

Ajax的概念

Ajax就是允许浏览器与服务器通信而无需刷新当前页面的技术,Ajax并不是一项新的技术,他实际上揉合多种技术,每种技术各尽其职,以一种全新的方式聚合在一起,

一、Ajax的原理

1:创建XMLHttpRequest对象
2:准备发送请求数据(请求方式和请求地址)
3:调用XMLHttpRequest对象的open()方法,将方式和地址传递进去
4:调用XMLHttpRequest对象的send()方法,向服务器发送请求
5:服务器给出响应,如果操作成功并且可用,向服务器中获取资源.
6:操作JS来操作更新页面

<script>
	//文档就绪时间
	window.onload=function(){
   
		//超链接添加点击事件
		document.getElementsByTagName("a")[0].onclick=function(){
   
			  //1：创建XMLHttpRequest对象
		      var req = new XMLHttpRequest();
		      //2：准备发送请求数据
		      //设置请求方式
		      var method = "post";
		      //设置请求地址
		      var url = this.href;
		      //调用XMLHttpRequest对象的open()方法，将方式和地址传递进去
		      req.open(method,url);
		      //调用XMLhttpRequest对象的send()方法，向服务器发送请求
		      req.send(null);
		      //服务器给出响应，如果操作成功并且可用，从服务器中获取数据源
		      //添加一个监听事件
		      req.onreadystatechange=function () {
   
		        //服务器是否启动成功
		        if(req.readyState==4){
   
		          //服务器响应是否成功
		          if(req.status==200){
   
		            //操作JS来操作DOM更新页面
		            document.getElementById("my").innerHTML=req.responseText;
		          }
		        }
		      }
				return false;
		}
	}

ReadyState：是描述服务器的状态的属性

0：请求未初始化（在调用open()之前）
1：请求已提出（调用send()之前）
2：请求已发出（这里通常可以响应到内容的头部）
3：请求处理中（响应内容部分数据，但是服务器还没有响应完）
4：请求完成

status:得到服务器的响应状态码

404：没有找到响应页面或者方法
500:一般是代码的错误
200：响应成功

jQuery中的Ajax的写法

``jsp
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function () {
   
            $("#username").blur(