前段部分：Json、Ajax

最新推荐文章于 2023-03-29 15:15:51 发布

放羊的琳琳啊

最新推荐文章于 2023-03-29 15:15:51 发布

阅读量141

点赞数

分类专栏：前端文章标签：前段：Json Ajax

本文链接：https://blog.csdn.net/qq_42688532/article/details/86607884

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（以下是个人对一些前端知识的简单理解）
—>Json:
Json JavaScript 对象表示法（JavaScript Object Notation）是一种存储数据的方式。

1.创建Json对象：
var gareen = {“name”:“李白”,“hp”:666};
这样就创建了一个JSON 对象
JSON对象由名称/值对组成名称和值之间用冒号:隔开
名称必须用双引号" 包含起来
值可以是任意javascript数据类型，字符串，布尔，数字，数组甚至是对象
不同的名称/值对之间用逗号 , 隔开

<script>
var gareen = {"name":"李白","hp":666};
document.write("这是一个JSON对象: "+gareen);
</script>

访问Json对象：

<script>
var gareen = {"name":"李白","hp":666};
document.write("英雄名称: " + gareen.name + "<br>");
document.write("英雄血量: " + gareen.hp + "<br>");
</script>

2.Json数组：

<script>
var heros=
[
    {"name":"李白","hp":666},
    {"name":"韩信","hp":313},
    {"name":"露娜","hp":432},
    {"name":"火舞","hp":389}
]
document.write("JSON数组大小"+heros.length);
</script>

访问Json数组：

<script>
var heros=
[
    {"name":"李白","hp":666},
    {"name":"韩信","hp":313},
    {"name":"露娜","hp":432},
    {"name":"火舞","hp":389}
]
document.write( "第4个英雄是:" +  heros[3].name);
</script>

3.对象转换：
*字符串对象转为JSON对象：通过字符串拼接得到一个JSON结构的字符串，并不是一个JSON对象。需要通过eval转换得到，转换的时候注意,eval 函数要以（开头，）结尾：

 <script>
    var s1 = "{\"name\":\"盖伦\"";
    var s2 = ",\"hp\":616}";
    var s3 = s1+s2;
    document.write("这是一个JSON格式的字符串:" + s3);
    document.write("<br>");
    var gareen = eval("("+s3+")");
    document.write("这是一个JSON对象: " + gareen);
    </script>

*JSON 对象转换为字符串：json 对象因为是一个javascript对象，所以如果直接打印的话，看不到里面的内容。有时候要看看这个对象是不是我们期望的，所以需要通过 JSON.stringify 函数把它转换为字符串：

 <script>
var hero = {"name":"盖伦","hp":"616"};
document.write("这是一个json 对象："+ hero);
document.write("<br>");
var heroString = JSON.stringify(hero)
document.write("这是一个json 字符串："+ heroString );
</script>

----->Ajax

Ajax的工作原理:
*Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
*AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
*用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
*AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

AJAX包含的技术:
*AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
*服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
*XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择
*XHTML（eXtended Hypertext MarkupLanguage,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；
*DOM（Document Object Model,文档对象模型）实现动态显示和交互；
*使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
*使用JavaScript绑定和处理所有数据

AJAX的缺陷:
1，AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
2，AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
3，对流媒体的支持没有FLASH、Java Applet好。
4，一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

XMLHttpRequest对象:
XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.

创建XMLHttpRequest对象（实现方法不统一）:
1，Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
2，其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
3，XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

XMLHttpRequest对象初始化:

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

完整的ajax请求及注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
        //当页面加载完毕之后，执行以下代码
        window.onload = function(){
            document.getElementById("ok").onclick = function(){
                /*
                 * 1	创建XMLHttpRequest对象
                 */
                var xhr = ajaxFunction();
 
                /*
                 * 2	服务器向浏览器响应请求
                 *
                 * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
                 0 代表未初始化。 还没有调用 open 方法
                 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
                 2 代表已加载完毕。send 已被调用。请求已经开始
                 3 代表交互中。服务器正在发送响应
                 4 代表完成。响应发送完毕
                 常用状态码及其含义：
                 404 没找到页面(not found)
                 403 禁止访问(forbidden)
                 500 内部服务器出错(internal service error)
                 200 一切正常(ok)
                 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
                 */
                xhr.onreadystatechange = function(){
                    alert(xhr.readyState);
                    //alert(xhr.status);
                    if(xhr.readyState==4){
                        var data = xhr.responseText;
                        alert(data);
                        alert("xhr.status:"+xhr.status);
                        if(xhr.status==200||xhr.status==304){
                            var data = xhr.responseText;
                            alert(data);
                        }
                    }
                }
 
                /*
                 * 3	浏览器与服务器建立连接
                 *
                 * xhr.open(method, url, asynch);
                 * 		* 与服务器建立连接使用
                 * 		* method：请求类型，类似 “GET”或”POST”的字符串。
                 * 		* url：路径字符串，指向你所请求的服务器上的那个文件。请求路径
                 * 		* asynch：表示请求是否要异步传输，默认值为true(异步)。
                 */
 
 
                /*  xhr.open("POST","../testServlet?timeStamp="+new Date().getTime()+"&c=18",true);
                 //如果是POST请求方式，设置请求首部信息
                 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                 */
 
                xhr.open("GET","http://192.168.1.187:8080/RequestAndResponse/testServlet?timeStamp="+new Date().getTime()+"&c=18",true);
 
                /*
                 * 4	浏览器向服务器发送请求
                 *
                 * 		send()方法：
                 * 		* 如果浏览器请求的类型为GET类型时，通过send()方法发送请求数据，服务器接收不到
                 * 		* 如果浏览器请求的类型为POST类型时，通过send()方法发送请求数据，服务器可以接收
                 */
                xhr.send("a=6&b=9");		//xhr.send(null);
            }
        }
 
        function ajaxFunction(){
            var xmlHttp;
            try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            }
            catch (e){
                try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }
 
            return xmlHttp;
        }
 
    </script>
</head>
<body>
    <form action="" enctype="application/x-www-form-urlencoded">
        <input type="button" name="ok" id="ok" value="测试服务器连接">
    </form>
</body>
</html>

放羊的琳琳啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前段部分：Json、Ajax

（以下是个人对一些前端知识的简单理解）—&gt;Json:Json JavaScript 对象表示法（JavaScript Object Notation）是一种存储数据的方式。1.创建Json对象：var gareen = {“name”:“李白”,“hp”:666};这样就创建了一个JSON 对象JSON对象由名称/值对组成名称和值之间用冒号:隔开名称必须用双引号" 包含起...
复制链接

扫一扫