小言_互联网的博客

Json和Ajax

2020-05-23 19:37 566人阅读  评论(0)

Json和Ajax

文章目录

一、jquery元素节点操作

1.文本内容的操作

  • 方法：①text() ②text(val)

例子：

$div = $(‘div’) //获取div元素
Console.log($div.text())  //获取文本内容
$div.text(“aaaaa”) //设置了文本的内容

2.HTML内容的操作

  • ①html():用于获取第一个匹配元素的HTML内容
  • ②html(val)：用于设置全部匹配元素的HTML内容

注意：内容中包含HTML代码可以被浏览器解析

3.对元素值的操作

主要对于input、check、radio元素

  • ①val() //获取值
  • ②val(“”) //设置值

4.对于DOM节点的操作

  • ①创建元素节点：
Var $jsp = $(“<p></p>”)   //创建了一个p节点

插入到div里面

$(“div”).append($jsp)
  • ②插入节点：
方法：1）往元素的内部插入

append():为所有匹配的元素的内部追加内容
appendTo()：将所有匹配的元素添加到另一个元素集合中
prepend()：往元素的集合的前面添加内容
prependTo()

2）往元素的外部插入

after():在每个匹配的元素之后插入
insertAfter()：
before()：在每个匹配的元素前边插入
insertBefore()
  • ③删除节点：
remove():用于从DOM中删除匹配的元素（常用）

detach()：也是用于删除匹配的元素，与remove不同的是，detach不会将jQuery中的对象删除。

empty()：把标签的内容清空掉，不是绝对意义上的删除
  • ④复制节点
clone():

示例：$(“#box1 p:eq(1)”).bind(“click”,function(){

$(this).clone().insertAfter($(this))

})

带参数:clone(True):加了这样之后会将事件处理程序一并复制
  • ⑤替换节点
replaceAll(Seletor):用于使所有的元素替换掉Seletor匹配的元素

示例：$(“<div>good</div>”).replaceAll(“div”)

replaceWith(content):用匹配的元素替换掉指定的HTML元素

示例：$(“#box1”).replaceWith(“<div>sunck</div>”)
  • ⑥遍历节点
each():

示例：

$(“p”).each(function(index){    //index表示第几个

$(this).attr(“title”,”我是第”+(index+1)+”个p标签”)

})
  • ⑦包裹节点：
wrap():把匹配到的标签用另一个标签包裹起来

unwarp():去除包裹

warpAll():整体包裹

warpInner():包裹内部

5.修改CSS样式

addClass(class)

removeClass(class)

toggleClass(class):若有这个class类就删除，若无就添加

6.修改CSS的属性

方法：css(attr,value)
示例：

$(“#btn”).bind(“click”,function(){

$(“#box2”).css(“background-color”,”red”)   //修改背景颜色的属性

console.log($(“#box2”).css(“background-color”))  //获取值

})

7.滚轮事件与函数节流

  • jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

  • 函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

二、Json

与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

1.json

  • JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
  • JSON的规则很简单：对象是一个无序的“‘名称:值'对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值'对”之间使用“,”（逗号）分隔。

规则如下:

  • 1）映射用冒号（“：”）表示。名称:值
  • 2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
  • 3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
  • 4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},

{名称1:值,名称2:值2}

]
  • 5 )元素值可具有的类型：string, number, object, array, true, false, null

2.json中的五种写法：

  • 1）传统方式存储数据，调用数据

代码如下:

<script type="text/javascript">
//JS传统方式下定义"类"
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
//JS传统方式下创建"对象"
var p = new Person(20141028,"一叶扁舟",22);
//调用类中的属性，显示该Person的信息
window.alert(p.id);
window.alert(p.name);
window.alert(p.age);
</script>
  • 2）第一种样式：

代码如下:

<script type="text/javascript">
var person = {
id:001,
name:"一叶扁舟",
age:23
}
window.alert("编号:"+person.id);
window.alert("用户名:"+person.name);
window.alert("年龄:"+person.age);
</script>
  • 3）第二种样式：

代码如下:

<script type="text/javascript">
var p = [
{id:001,name:"一叶扁舟",age:22},
{id:002,name:"无悔",age:23},
{id:003,name:"无悔_一叶扁舟",age:24}
];
for(var i = 0; i < p.length; i++){
window.alert("编号:"+p[i].id);
window.alert("用户名:"+p[i].name);
window.alert("年龄:"+p[i].age);

}
</script>
  • 4）第三种样式:

代码如下:

<script type="text/javascript">
var p = {
"province":[
{"city":"福州"},
{"city":"厦门"},
{"city":"莆田"}
]
};
window.alert("所在城市：" + p.province[0].city);
</script>
  • 5)第四种样式：

代码如下:

<script type="text/javascript">
var p = {
"ids":[
{"id":001},
{"id":002},
{"id":003}
],
"names":[
{"name":"一叶扁舟"},
{"name":"无悔"},
{"name":"无悔_一叶扁舟"}
]
};
for(var i = 0; i < p.names.length; i++){
window.alert("名字:"+p.names[i].name);

}
for(var i = 0; i < p.ids.length; i++){
window.alert("id:"+p.ids[i].id);
}

</script>
  • 6）第五种样式:

代码如下:

<script type="text/javascript">
var p = {
"province":["福州","厦门","莆田"]
};
window.alert("城市的个数:"+p.province.length);
window.alert("分别是：\n");
for(var i=0;i<p.province.length;i++){
window.alert(p.province[i]);
}
</script>

三、ajax

1.简介

  • ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步
  • 同步和异步
  • 现实生活中，同步指的是同时做几件事情， 异步指的是做完一件事后再做另外一件事，
  • 程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
  • 局部刷新和无刷新
  • ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，
  • ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
  • 同源策略
  • ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示
XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.
  • 常用参数
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步
  • 以前的写法：
$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});
  • 新的写法(推荐)：
$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

// data.json里面的数据： {"name":"tom","age":18}

2.常用参数简介

  • 1.url

说明：发送请求的地址（默认为当前页面），要求是String类型的参数，比如是.net下，"~wexin(控制器)/getweinxinmenu(动作)"，

  • 2.type

说明：请求方法(post或者get)，默认是get，要求是String类型的参数。其他的htpp请求如（put、delete）等也支持，但是要浏览器支持

  • 3.timeout

说明：设置请求超时时间（毫秒），要求是number类型的参数。此设置将覆盖$.ajaxSetup()方法的全局设置。

  • 4.async

说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。注意：同步时浏览器会被锁住。

  • 5.cache

说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

  • 6.data

  • 说明：发送到服务器的数据，要求是Object或string类型的参数。如果已经不是字符串，将自动转换为字符串格式。

  • get请求中将附加在url后。防止这种自动转换，可以查看processData选项。

  • 对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。

  • 例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。

  • 7.dataType:

  • 说明：预期服务器返回的数据类型，要求为String类型的参数。如果不指定，

  • JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
  • 8.beforeSend：
  • 说明：发送请求前可以修改XMLHttpRequest对象的函数（也可以修改页面一下信息），例如添加自定义HTTP头
  • 要求为Function类型的参数。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
           this;   //调用本次ajax请求时传递的options参数
        }
  • 9.complete：
  • 说明：请求完成后调用的回调函数（请求成功或失败时均调用）。
  • 要求为Function类型的参数，参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
         this;    //调用本次ajax请求时传递的options参数
      }
  • 10.success：

说明:请求成功后调用的回调函数,要求为Function类型的参数，有两个参数。

  • (1)由服务器返回，并根据dataType参数进行处理后的数据。
  • (2)描述状态的字符串。
function(data, textStatus){
        //data可能是xmlDoc、jsonObj、html、text等等
        this;  //调用本次ajax请求时传递的options参数
     }
  • 11.error:

**说明：请求失败时被调用的函数。要求为Function类型的参数，**该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

function(XMLHttpRequest, textStatus, errorThrown){
      //通常情况下textStatus和errorThrown只有其中一个包含信息
      this;   //调用本次ajax请求时传递的options参数
   }
  • 12.contentType：

说明：内容编码类型。要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

  • 13.dataFilter：

说明：给Ajax返回的原始数据进行预处理的函数。要求为Function类型的参数，提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){
            //返回处理后的数据
            return data;
        }
  • 15.global：

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

  • 16.ifModified：

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

  • 17.jsonp：

**要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，**例如

{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
  • 18.username：

要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

  • 19.password：

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

  • 20.processData

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

  • 21.scriptCharset：

要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

  • 22.$.each()函数:

$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。

  • 23.案例代码：
$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});
  • $.ajax验证登录：
<script type="text/javascript" language="javascript">
        function IbtnEnter_onclick() {
            checklogin();
            return false;
        }
        function checklogin() {
            if ($("#TxtUserName").val() == "") {
                alert("用户名不能为空！");
                $("#TxtUserName").focus();
                return false;
            }
            if ($("#TxtPassword").val() == "") {
                alert("密码不能为空！");
                $("#TxtPassword").focus();
                return false;
            }
            $.ajax({
                type: "POST",
                url: "ajax/Handler.ashx?M=" + Math.random(),
                data: "username=" + $("#TxtUserName").val().toString() + "&pwd=" + $("#TxtPassword").val().toString(),
                success: function (data) {
                    if (data == "1") {
                        location.href = "index.aspx";
                        return true;
                    }
                    else {
                        alert("请确认您输入的用户名或密码输入是否正确！");
                        $("#TxtUserName").val("");
                        $("#TxtPassword").val("");
                        $("#TxtUserName").focus();
                        return false;
                    }
                }

            })
        }
    </script>
  • 一般处理程序
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Web.SessionState;//继承接口IReadOnlySessionState需要引入的命名空间

public class Handler : IHttpHandler, IRequiresSessionState
{
    SqlHelper helper = new SqlHelper();
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string username = context.Request.Params["username"].ToString().Trim();
        string pwd = context.Request.Params["pwd"].ToString().Trim();
        if (username != "" && pwd != "")
        {

            string sql = @"SELECT * FROM [USER] WHERE USERNAME='"+username+"' AND PASSWORD='"+pwd+"' ";
            if (!helper.Exists(sql))
            {
                context.Response.Write("0");
            }

            else
            {
                SqlDataReader reader = helper.ExecuteReader(sql);
                while (reader.Read())
                {
                    context.Response.Write("1");
                    context.Session["username"] = username.ToString().Trim();
                    context.Session["pwd"] = pwd.ToString().Trim();
                }
            }
            
        }
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

四、Jsonp

1.jsonp

  • 在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的 ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外，这些标签可以通过 src属性请求到其他服务器上的数据。
  • 利用 script标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。
  • ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。
  • Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本。
  • 当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。
  • 因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get ！
    示例：
$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})

其实jquery 内部会转化成

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= jQuery2030038573939353227615_1402643146875&action=aaron"></script>
  • 然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。
  • 使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄）
  • 服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去
  • （在jquery 源码中， jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插入时函数执行，执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。）

2.JSONP的优点是：

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

3.JSONP的缺点则是：

  • 它只支持GET请求而不支持POST等其它类型的HTTP请求；
  • 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
  • 没有关于 JSONP调用的错误处理。
  • 如果动态脚本插入有效，就执行调用；如果无效，就静默失败。
  • 失败是没有任何提示的。例如，不能从服务器捕捉到404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。

4.JQUERY对JSONP的支持

从JQery 1.2以后，就开始支持JSONP的调用。JQuery对前台做了很好的处理如自动生成全局回调函数等,但后台还需要开发人员自己实现

$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){          
    // 业务逻辑执行代码
});

请求URL

$.ajax({
       url:"http://xxx.com/rest.do",
        dataType:"jsonp",   //必须指定

        jsonp : "c",        //若不指定则默认为callback

        jsonpCallback:"test",//若不指定则Jquery自己生成随机的名称
        success:function(data){
            //业务逻辑执行代码
        }
});
  • 当dataType为JSONP时,JQUERY会为用户生成一个全局函数名称为jsonpCallback参数的值,这个函数内部调用了success方法JQUERY的实现原理及步骤
  • 以GET方式请求目标地址,并在URL中拼接以jsonp参数值为key,以jsonpCallback值为value的参数
  • 请求返回回调函数数据
  • 触发调用全局的回调函数,在全局函数回调中调用success方法并将数据传递给success方法

转载：https://blog.csdn.net/wolfGuiDao/article/details/106302719
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场