1. AJAX
AJAX (Asynchronous JavaScript and XML) means using JavaScript to perform asynchronous network requests.
Cross-domain can be achieved mainly by setting up a proxy server, JSONP and CORS.
Writing a complete AJAX code in JavaScript is not complicated, but it needs to be noted: AJAX requests are executed asynchronously, that is, they need to be Get the response through the callback function.
Related recommendations: "python Video"
##The process of creating ajax is generally as follows:
Create an XMLHttpRequest object, that is, create an asynchronous call object; determine the XHR object attributes; create a new HTTP request, and specify the method, URL and verification information of the HTTP request; set a function to respond to changes in the status of the HTTP request; send HTTP request; obtain the data returned by the asynchronous call; use JavaScript and DOM to implement partial refresh. Code.
var xmlhttp;function createXMLHttpRequest () {
xmlhttp = null; if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} // 异步调用服务器段数据
if (xmlhttp != null) { // 创建http请求
xmlhttp.open('GET/POST', url, true); // 设置http请求状态变化的函数
xmlhttp.onreadystatechange = httpStateChange; // 发送请求
xmlhttp.send(null);
} else { console.log('不支持XHR');
}
}
// 响应HTTP请求状态变化的函数function httpStateChange () { //判断异步调用是否完成
if (xmlhttp.readyState == 4) {//readyState==4表示后台处理完成了
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){ //判断异步调用是否成功,如果成功开始局部更新数据
//code...
} else{ console.log("出错状态码：" + xmlhttp.status + "出错信息：" + xmlhttp.statusText);
}
}
}var request;if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}. In the callback function, usually we only need to judge whether the request is completed through readyState === 4. If it is completed, then judge whether it is a successful response based on status.
Is it because JavaScript cannot request URLs from external domains (that is, other websites)? There are still methods, probably the following.
2.1 CORS
CORS (Cross-Origin Resource Sharing, cross-origin resource sharing) is a draft of W3C, which defines how to browse when cross-domain resources must be accessed. How should the server communicate with the server. The basic idea behind CORS is to use custom HTTP headers to allow the browser to communicate with the server to determine whether the request or response should succeed or fail. For example, a simple request sent using GET or POST has no custom header, and the main content is text/plain. When sending this request, you need to attach an additional Origin header to it, which contains the source information of the requested page (protocol, domain name, and port) so that the server can decide whether to respond based on this header information. Below is an example of the Origin header.Origin: http://www.nczonline.net
Access-Control-Allow-Origin: http://www.nczonline.net
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
2.2 图像Ping
我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。我们也可以动态的创建图像，使用它们的onload和onerror事件处理成西来确定是否接收到了响应。
动态创建图像经常用于图像Ping。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候收到的。
来看下面的例子。
var img = new Image();
img.onload = img.onerror = function () { console.log('Done');
};
img.src = 'http://www.example.com/test?name=Nico';这里创建了一个Image的实例，然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。请求从设置src属性那一刻开始，而这个例子在请求中发送了一个name参数。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像Ping有两个主要的缺点：
只能发送GET请求。无法访问服务器的响应文本。
因此，图像Ping只能用于浏览器与服务器间的单向通信。
2.3 JSONP
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。JSONP与JSON看起来差不多，只不过是被包含在函数调用中的JSON，如下。
callback({'name': 'Azure'});JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调参数中JSON数据。下面是一个典型的JSONP请求。
http://freegeoip.net/json/?callback=handleResponse
这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫handleResponse()。
JSONP是通过动态