In-depth analysis of Ajax and cross-domain issues_AJAX related

This article mainly introduces Ajax and cross-domain issues in detail, telling you what Ajax is and what is cross-domain? It has certain reference value. Interested friends can refer to it

What is ajax

##Ajax(Asynchronous

JavaScript and XML), is a technology that can request additional data from the server without refreshing the page. The emergence of ajax brings a better user experience.

The core of Ajax is XMLHttpRequest (XHR) Objects. This technology is to obtain data from the server without refreshing, but it does not have to be XML data, it can also be json.

XMLHttpRequest object

Usage of XHR

1. Create an XMLHttpRequest object

2. Send a request

1).Set the request line xhr.open( )

2).
POST requestNeeds to set the request header xhr.setRequestHeader() The value of POST request header Content-Type: application/x-www-form-urlencoded3).Set request Body xhr.send() get request passes null, post depends on the situation

3. Process the server response

First determine whether the response

status codeand the asynchronous object are parsed Completed.

Status code status returned by the server

1xx:Message2xx:Success
3xx:Redirect
4xx:Request error
5xx: Server error

The status code of the asynchronous object readystate

0: The asynchronous object has been created

1: The asynchronous object initialization is completed and the request is sent
2: Receive the original data returned by the server
3: The data is being parsed, and parsing takes time
4: The data parsing is completed, and the data can be used

XML

Characteristics of XML, from a famous family, developed by W3C, a data format that has been strongly recommended by Microsoft and IBM. It is designed to represent pages.

Grammar rules: Similar to HTML, they are expressed through tags

Special symbols: such as a8093152e673feb7aba1828c43532094 use entity-transfer The parsing of the characters

xml requires the cooperation of the front and backend:

1. When the backend returns, set the Content-Type value in the response header to application/xml
2. The frontend is asynchronous When the object receives background data, remember to receive it in the form of xml, xhr.responseXML, and it returns an
object object with the content of #document

JSON

JSON (JavaScript Object Notation) comes from the grassroots. It is a subset of Javascript and is responsible for describing the data format. JSON itself is a string in a special format that can be converted into a js object and is a network There is no one of the most widely used data formats for transmitting data.

Grammar rules: Data is represented by key/value pairs, and the data is separated by commas , curly brackets save objects, square brackets save arrays, names and values ​​need to be enclosed in double quotes (this is a small difference from js).
Parsing/manipulating JSON in js: 1.JSON.parse(json string); Parse a json format string into a js object
2.JSON.stringify(js object); Convert a js object into a json format The string

encapsulates an ajax

function pinjieData(obj) {
 //obj 就相当于 {key:value,key:value}
 //最终拼接成键值对的字符串 "key:value,key:value"
 var finalData = "";
 for(key in obj){
  finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
 }
 return finalData.slice(0,-1);//key:value,key:value
}

function ajax(obj) {
 var url = obj.url;
 var method = obj.method.toLowerCase();
 var success = obj.success;
 var finalData = pinjieData(obj.data);
 //finalData最终的效果key:value,key:value

 //1.创建xhr对象
 var xhr = new XMLHttpRequest();
 //get方法拼接地址,xhr.send(null)
 if (method=='get'){
  url = url + "?"+finalData;
  finalData = null;
 }

 //2.设置请求行
 xhr.open(method,url);

 // 如果是post请求,要设置请求头
 if (method=='post'){
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 }

 //3.发送
 xhr.send(finalData);

 //4.监听服务器返回的数据
 xhr.onreadystatechange = function () {
  if (xhr.status==200 && xhr.readyState==4){
   var result = null;
   //获取返回的数据类型
   var rType = xhr.getResponseHeader("Content-Type");
   if (rType.indexOf('xml')!=-1){
    result = xhr.responseXML;
   }else if(rType.indexOf('json')!=-1){
    // JSON.parse 的意思是 将 json格式的字符串
    //比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
    //转成js对象
    result = JSON.parse(xhr.responseText);
   }else{//当成普通的字符串去处理
    result = xhr.responseText;
   }

   //将这里解析好的数据交给页面去渲染
   success(result);
  }
 }
}

Use ajax## in jQuery #API jQuery ajaxjQuery provides us with a more convenient ajax package.

$.ajax({}) can be configured to initiate an ajax request

$.get() to Initiate ajax request in get mode

$.post() Initiate ajax request in post mode
$('form').serialize() Serialize form (format key=val$key=val)

Parameter description

url:Interface address

type:Request method (get/post)

timeout:Required to be Number type parameter, set request timeout Time (milliseconds)
dataType: It should be a value passed by the client to the server, telling the server how to process:
data: Send request data
beforeSend: It is required to be a parameter of Function type, which can be modified before sending the request Functions of the XMLHttpRequest object, such as adding custom HTTP headers. If false is returned in beforeSend, this ajax request can be canceled.
success: Called after a successful response
error: Called when an error response
complete: Called when the response is completed (including success and failure)

 //ajax===get
 $.ajax({
  url:'',
  data:'key=value&key=value',
  type:'get',
  success:function (result) {
   console.log(result);
  }
 });

//ajax===post
$.ajax({
  url:'',
  data:'key=value&key=value',
  type:'post',
  success:function (result) {
   console.log(result);
  }
 });

//$.get
$.get({
  url:'',
  data:'key=value&key=value',
  success:function (result) {
  console.log(result);
  }
});

//$.post
$.post({
  url:'',
  data:'key=value&key=value',
  success:function (result) {
  console.log(result);
  }
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
 dataType:'jsonp'

Cross domain

A major limitation of ajax communication via XHR (same domain , same port, same protocol), derived from cross-server security policy. By default, XHR can only request resources in the same domain. This is to prevent certain malicious behaviors.

CORS cross domain

CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。

JSONP

JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素来使用,src属性知道一个跨域URL,JSONP是有效的JavaScript代码,浏览器可以跨域请求JS文件.
优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.
缺点:1.JSONP是从其他域加载代码执行,存在不安全风险.2.不好确定JSONP请求是否成败.

通过修改document.domain来跨子域

使用window.name来进行跨域

HTML5中新引进 window.postMessage方法来跨域传送数据

flash

iframe

服务器设置代理页面

图像Ping

通过使用标签,利用网页可以从任何网页加载图像原理.
图像Ping常用于跟踪用户点击页面或动态广告曝光次数.

2个缺点:1.只支持GET请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信.

var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";

comet

一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术.

SSE (Server-Sent Events) 服务器发送事件

Web Sockets

Web Sockets的目标是在一个单独的持久链接上提供全双工,双向通信.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

相关推荐：

实例分析jquery ajax异步提交表单数据的方法

前端ajax与后端交互详解

Ajax实现动态加载数据的实力分享

The above is the detailed content of In-depth analysis of Ajax and cross-domain issues_AJAX related. For more information, please follow other related articles on the PHP Chinese website!