Ajax基础

Ajax介绍:

1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。

2、AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

3、AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

4、AJAX 可以使网页实现异步更新

5、AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

 

(2)    ajax 同步和异步区别?

我们在使用 ajax 一般都会使用异步处理。

异步处理呢就是我们通过事件触发到 ajax,请求服务器,在这个期间无论服务器有没有响应,客户端的其他代码一样可以运行。

同步处理:我们通过实践触发 ajax,请求服务器,在这个期间等待服务器处理请求, 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

同步需要等待返回结果才能继续,异步不必等待,一般需要监听异步的结果

同步是在一条直线上的队列,异步不在一个队列上 各走各的

 

Ajax 原理:

 

jQuery  $.get()方法

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

GET 基本上用于从服务器获得(取回)数据。

 例:

$.get(
        "http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3",
        function(res,state){
            console.log(res)
            console.log(state)
            if(state == "success"){
                $("img").attr("<img src = '"+res.data[0].imgUrlPc+"'>")
                res.data.forEach(function(item,index){
                    $("div").append("<img src = '"+item.imgUrlPc+"'>")
                })
            }
           
        }
    )
 
jQuery  $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

 

$.post("http://wkt.myhope365.com/weChat/applet/course/list/type",{
        type:"boutique",pageNum:1,pageSize:10
    },function(res,state){
        console.log(res);
        console.log(state);
        if(state == "success"){
            var str = ""
            res.rows.forEach(function(item,index){
                str += '<dt><div><img src="'+item.coverFileUrl+'" alt=""></div><div>'+item.courseTitle+'</div><div>共'+item.participationsCount+'节课 | '+item.learningNum+'人报名</div><div>免费</div></dt>'
            })
            $("dl").append(str)
        }

    })
 
 
$.ajax()

ajax() 方法用于执行 AJAX(异步 HTTP)请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

(以下参数非必须写,例子中的参数为一般请求时要求写的)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

type: 要求为String类型的参数,请求方式(post或get)默认为get。

async: (一般不用管)
要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

cache: (一般不用写)
要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

data: 
要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 
要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
        :返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。

complete:
要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
         (1)由服务器返回,并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

error:
要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

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

 

例:

 $.ajax({
            url:"http://wkt.myhope365.com/weChat/applet/subject/list",
            type:"post",
            data:JSON.stringify({"enable":1}),
            contentType:"application/json",

            success:function(res){
                console.log(res)
                var str  = ""
                res.rows.forEach(function(item,index){
                    str+='<div>'+item.subjectTitle+'</div>'
                })
                $("body").append(str)
            }

        })
 

 

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快,更易解析。

JSON 是轻量级的文本数据交换格式

JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。

JSON 具有自我描述性,更易理解

 

JSON对象

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value(键/值)对。

key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

你可以使用点号(.)来访问对象的值:

你也可以使用中括号([])来访问对象的值:

 

例: var obj = {"name":"lisi","age":18}

 

JSON数组

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。

JavaScript 中,数组值可以是以上的 JSON 数据类型,也可以是 JavaScript 的表达式,包括函数,日期,及 undefined。

对象属性的值可以是一个数组:

例:

var obj = {

"name":"网站",

"num":3,

"sites":[ "Google", "Runoob", "Taobao" ]

}

var a = obj.sites[0]

 

 

JSON.parse()方法      将字符串转换为对象

 

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

 

JSON.stringify()   将对象转换为字符串

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

 

 

这两种JSON方法可以对象深拷贝

obj = JSON.parse(JSON.stringify(obj1))

        obj.name = "zhangsan"
        console.log(obj);
        console.log(obj1);
 
posted @ 2021-12-24 21:59  ..Shmily  阅读(50)  评论(0)    收藏  举报