Home > Web Front-end > JS Tutorial > body text

Introduction to the get and post methods based on js native and ajax as well as the native writing method of jsonp

不言
Release: 2018-07-02 17:04:50
Original
1945 people have browsed it

The following brings you an example of the get and post methods based on js native and ajax, as well as the native writing method of jsonp. The content is quite good, so I will share it with you now and give it as a reference.

login.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status>=200 && xhr.status<300) {
alert(xhr.responseText);
};
};
}
}
Copy after login

ajax method

btn.onclick = function(){
ajax(
    "GET",
    "http://localhost/ajax2/my02.php",
    {xingming:xingming.value,pwd:pwd.value},
    function(data){
console.log(data);
},
function(errCode){
console.log(errCode);
}
)
Copy after login

Post method passing parameters

The difference between it and the get method:

01 Safe type. post is safer.

02 Speed. The speed of get is

03 orders of magnitude faster. The order of magnitude of post is larger.

Specific implementation:

var xhr = new XMLHttpRequest();
xhr.open("post","http://localhost/ajax2/login2.php",true);
var data = {
username:username1.value,
pwd:pwd1.value
}
// 设置请求头 告诉服务器发给他的数据是json格式
xhr.setRequestHeader("content-type","application/json");
xhr.send( JSON.stringify(data) );
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if ( xhr.status >= 200 && xhr.status < 300 ) {
alert(xhr.responseText);
};
};
}
Copy after login

Native jsonp method

var sc = document.createElement("script");
sc.type = "text/javascript";
document.body.appendChild(sc);
sc.src = "http://localhost/ajax2/jsonp.php?cb=myCallBack";

function myCallBack(data){
console.log(data);
}
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

Native implementation of Ajax About the use of MIME types

Write Ajax request function in native JS Function

The correct way to pass ajax callback function parameters

The above is the detailed content of Introduction to the get and post methods based on js native and ajax as well as the native writing method of jsonp. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template