web前端开发中的Ajax是什么？如何理解Ajax中的XMLHttpRequest对象？

欢迎大神评论指正！欢迎关注前端小白一锅！

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。它的出现使得向服务器请求额外的数据而无需卸载页面，从而带来了更好地用户体验。

Ajax全称为Asynchronous JavaScript and HTML，即异步获取数据的概念，是Jesse James Garrett在2005年提出的一种新的客户端与服务器数据交换方法。

负责Ajax运作的核心对象是XMLHttpRequest（XHR）对象。

该对象有5个关键属性，在进行Ajax通信时有着关键的作用。responseText（作为响应主体被返回的文本）、responseXML(如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档)、status（响应的HTTP状态）、statusText（HTTP状态的说明）、readyState（表示请求/响应过程的当前活动阶段）。

readyState有0到4一共5个取值，每当readyState的值发生变化时，都会触发一次readystatechange事件。

readyState：0（未初始化，表示尚未调用open（）方法）；

r

想读更多 ->

jQuery - AJAX load() 方法

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2><pid="p1">这是段落的一些文本。</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

实例

$("#div1").load("demo_test.txt");

如：在a.com的网站上引用了b.com的一个b.js，但这样跨域的引用并不会产生错误，说明调用js文件时不受跨域的影响。

翻译：shan66

预估稿费：200RMB

投稿方式：发送邮件至linwei#360.cn，或登陆网页版在线投稿

JSONP注入是一种鲜为人知却又相当普遍和危险的漏洞。JSONP是随着最近几年JSON、Web API的迅速崛起和对跨域通信的迫切需要而应运而生的。

什么是JSONP？

这里我们假设大家都已经了解JSON了，所以下面直接开始讨论JSONP。JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

让我们举个例子。 我们的网上银行应用程序，http://verysecurebank.ro，已实现一个API调用，可以用来返回当前用户的交易数据。

这样，通过向http://verysecurebank.ro/getAccountTransactions 端点发送HTTP请求，我们就能得到JSON格式的交易数据：

2、basePackages = { "com.xtt.txgl.home.controller"，“” })指定拦截目录过滤

3、AbstractJsonpResponseBodyAdvice 继承支出jsonp拦截请求，如果是请求中存在 callback 或 json字符，默认采用是需要处理

4、 public JsonpController() { 初始化类默认调用构造器，初始化父类拦截符号

super("callback", "jsonp");

}

5、示例：

/**

* 采用JSONP请求过滤，自动回调事件处理

*

* @ClassName: JsonpController

* @date: 2017年9月6日 下午3:33:06

* @version: V1.0

*/

@ControllerAdvice(basePackages = { "com.xtt.txgl.home.controller" })

public class JsonpContr

想读更多 ->

以请求百度数据为例浅析JS中JsonP跨域问题原理

跨域请求是指一个域名下的文件去请求另一个域名下的资源时，就会产生跨域请求。

请求01.txt文件的内容

body有一个按钮，点击的时候发送get请求请求本域名下的01.txt文件（里面内容为：又帅又爱笑）。

这是能够成功的，页面弹出了：又帅又爱笑。但是当我们请求别的域名下的文件时就会报错。

下面是小编在深圳的一个服务器（小编刚写的一个不太成熟的个人网站）上写的一个文本内容：

另一个服务器上01.txt

当

想读更多 ->

JSONP - 带你认识什么是JSONP

注：小编是一个有轻微处女座情节的人，所以很多内容为了方便阅读和格式美观，我都做成了图片，上传后头条都压缩了图片质量，但是不影响大家阅读，因为可以点击放大，哇哈哈！

提到JSONP，我当时在网上找了无数帖子也没有看懂它。那些文章大同小异，都是讲到JSONP原理以后就戛然而止，把我们这些初学者搞得云里雾里。所以，写下这篇文章，希望对大家有帮助！

为什么要有JSONP

回答这个问题之前，大家先想想什么是AJAX，JSONP就是一种能够解决AJAX办不到的事情而存在的一种取数据的技术。什么事情是AJAX办不到的呢？就是跨域！

跨域：顾名思义，就是当前网页的地址和我们要取的数据地址不在一个域下。这是因为浏览器都有一个“同源策略”— 两个页面的域名必须在同域的情况下，才能允许通信。

怎么才算一个域呢？

相同域名，相同端口，相同协议（因为不是这里的重点，大家可以请教Google）

“同源策略”的意义:“同源策略”有效地阻止了一些危险行为，比如你进入www.aaa.com，同时浏览器又开了一个www.bbb.com，如果这个www.bbb.com是一个木马网站，在没有“同源策略”的情况下，它就可能嵌入一些代码，来取得你在www.aaa.com的信息（因为这时两个页面是可以通信的） 。而正是因为有了“同源策略”

想读更多 ->

从 AJAX 到 JSONP的基础学习

目录索引：

一、AJAX的概念

二、POST && GET

三、原生实现AJAX简单示例

3.1 实现代码

3.2 重点说明

四、框架隐藏域

4.1 基本概念

4.2 后台写入脚本

4.3 JS主动判断Iframe的改变

4.4 表单提交数据实战

五、JQ 的 AJAX

5.1 load()

5.2 $.get()

5.3 $.post()

5.4 $.getScript()

5.5 $.getJson()

5.6 $.ajax()

a. 常用的属性说明

b. 常用的事件说明

c. 全局事件说明

d. $.ajaxSetup()

5.7 AJAX的再次封装

5.8 序列化表单

六、JSONP的概念

6.1 JSONP的概念

6.2 自己封装的JSONP

6.3 JQ的JSONP使用。

一、

AJAX的概念

AJAX(Asynchronous JavaScript And XML) 中文翻译即“异步的Java

想读更多 ->

通过jsonp实现js跨域请求php脚本的解决方案

公司需要新开发一个项目，这个项目和其他产品有关联。现在需要从其他产品的页面通过加载js文件来实现数据交换。简单的说就是：有两个产品，分别是A和B，A产品提供JS文件接口给B产品，B产品只需把JS接口文件引入到自己的页面即可显示A产品的数据。

ajax使用json请求的话，如果是相同域名下是可以的。但是跨域的话就不能访问了。这时需要使用jsonp来解决问题。如果以下教程帮到了您，请点击关注哦！

A产品是新项目，负责编写JS接口文件，域名是localhost.testlink.com；

B产品引入JS接口文件，域名是localhost.xyh.com。

1、在A产品里编写JS接口文件代码。

这段代码的作用是通过id来获取B产品引入js时的src属性字符串，从而获取参数。

想读更多 ->