JavaScript/Ajax/jQuery相关知识记录

本文最后更新于2016年11月21日,已超过 1 年没有更新,如果文章内容失效,还请反馈给我,谢谢!

=Start=

缘由:

前段时间把收集到的日志处理并入库了,现在需要写一些前端页面用于展示收集到的数据,用于向上汇报、内部展示,在此过程中碰到了很多问题,多半是因为对js不够熟悉导致的,所以现在大体记录一下,方便以后碰到类似问题的时候有个参考。

正文:

什么是AJAX?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是一种与服务器交换数据的技术,可以在不重新加载整个页面的情况下更新网页的一部分。

什么是jQuery?

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。提示:如果没有 jQuery,AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

jQuery的 get()/post()/ajax() 方法的选取

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。ajax() 方法通过 HTTP 请求加载远程数据,该方法是 jQuery 底层 AJAX 实现。

一般情况下可以用 $.get, $.post 等实现AJAX功能。大多数情况下你无需直接操作$.ajax()函数,除非你需要操作不常用的选项,以获得更多的灵活性。

jQuery的 ajax() 方法

下面以一个实际的例子来说明jQuery的ajax()方法的使用:

参数(常用)

url:发送请求的地址(根据开头是否为「/」来决定是绝对地址还是相对地址)。
type:发送请求的方法(默认为「GET」)。
data:发送到服务器的数据。会自动转换为请求字符串格式。
dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

回调函数(常用)

error:在请求出错时调用。
success:当请求成功后调用。

发送数据到服务器(data 选项)

默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

data 选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变 contentType 选项的值,用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。

数据类型(dataType 选项)

$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型,比如 HTML,则数据就以文本形式来对待。

通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML,还可以指定 html、json、jsonp、script 或者 text。其中,text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。

注意:我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说,XML的话,服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

==

对于不同的dataType,在ajax()方法中会对传回的数据做不同的处理:

&

参考链接:

=END=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/2960.html

《JavaScript/Ajax/jQuery相关知识记录》上有7条评论

  1. JavaScript中的字符串判等
    https://stackoverflow.com/questions/3586775/what-is-the-correct-way-to-check-for-string-equality-in-javascript

    使用 === 而不是 ==

    JavaScript中如何遍历json对象
    https://stackoverflow.com/questions/722668/traverse-all-the-nodes-of-a-json-object-tree-with-javascript

    function traverse(o,func) {
    for (var i in o) {
    console.log([i, o[i]]);
    if (o[i] !== null && typeof(o[i])=="object") {
    //going one step down in the object tree!!
    traverse(o[i],func);
    }
    }
    }

a-z进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注