Recently, Baidu Map Development has touched a handful of native ajax, because Ajax has been written before using Jquery encapsulated Ajax objects, let's talk about native Ajax first.
ajax: asynchronous javascript and xml, which is not a language, but a new standard for updating web page data without refreshing the current web page. Its core is the XMLHttpRequest object. The tutorial can refer to the W3C tutorial for detailed parameter descriptions http://www.w3school.com.cn/ajax/ajax_intro.asp;
Combine one of the interview questions you see and explain how it works.The title is as follows:
XMLHttpRequest - What is this, how do I fully execute a POST request, and how do I detect errors?
The XMLHttpRequest object is used to interact with background data (without refreshing the current Web page)
(For a complete POST request, the first step is to determine if the browser supports XMLHttpRequest objects, which may not be supported in browsers with lower versions of IE, as shown below.
if(window.XMLHttpRequest){
var xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXobject){//Determine whether the browser supports ActiveX Control, IE7 Previous versions
var xmlhttp=new ActiveXobject("Microft.XMLHttp");
}
Set request line parameters, POST method, url, whether asynchronous, send request when setup is complete.Register the fallback function to determine if the interaction is complete and if the correct data is returned, code as follows: (Send parameters may not be set for GET requests)
if(xmlhttp!=null){
xmlhttp.open('post','/gpsobj/savePolygon',true);//Set Request Line Parameters
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");//Set up content types, several of which are commonly used are described below
xmlhttp.send(pointArrs);//Send Request and Request Body Content
xmlhttp.onreadystatechange=function(){//Register fallback function
if(xmlhttp.readyState==4){//Interaction completed
if (xmlhttp.status==200) {//Whether the content was requested correctly, 200 indicates that the request was successful
// console.log("1");
}
}
}
}
The complete POST request has been completed here. What I want to say below is the content type that I need to set up in project development, namely content-type, the three types that content-type in HTTP often uses, application/json,text/plain.
- application/x-www-form-urlencoded: The form's default format for submitting data, which is encoded as key/value and sent to the server. In my project, I need to do this to send the coordinates of the polygon to the remote server for resolution (instead of using application/json to allow for easy saving of values to the database,However, it can also be sent in JSON format, which converts json-formatted values to strings when the server stores the database.The complete code is shown below.
- application/json: Data is sent as a JSON object
- text/plain: Data is sent in plain text, which is the default way to send content.
//Get an array of polygon points and submit to the server
getPoint:function(polygon){
var path=polygon.getPath();
var pointArr=[];
for(var i=0;i<path.length;i++){
// console.log('+path[i].lng+','+path[i].lat+') coordinates of the'+i+'point);
var point='{"lng":'+path[i].lng+','+'"lat":'+path[i].lat+'}';
pointArr.push(point);
}
var pointArrs='points=['+pointArr+']';
if(xmlhttp!=null){
xmlhttp.open('post','/gpsobj/savePolygon',true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(pointArrs);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if (xmlhttp.status==200) {
// console.log("1");
}
}
}
}
},