1. Introduction to Ajax
Simply put, ajax is a technology that can realize some interactive operations without refreshing, such as common login, if the password is wrong, there will be a red word to indicate that the password is wrong. This kind of ajax technology is used, and data verification does not need to be refreshed The browser directly performs the corresponding detection and returns the corresponding information
2. Implementation in jQuery
Core part html code
<body>
账号：<input type="text" name="uid" id="uid" />
<br> Password:
<input type="password" name="pass" id="pass" />
<button id="btn">确认</button>
</body>
The result of not setting the style, by the way, the input is an inline block element, that is, the characteristics of these two elements are both, it can be placed on the same line with other elements like inline elements, and it can be combined with block Element width and height can be set like elements
jQuery implements ajax. First, you need to introduce jQuery into the page.
$(document).ready(function() {
$("button").click(function() {
var uid = $ ('# uid') .val ();
var pass = $ ('# pass'). val ();
//ajax post at least three parameters url, data, success callback function
$.post(
"./login_confirm", {
"uid": uid
"pass": pass
},
function(result) {
console.log(result);
}
);
});
});
When the mouse is clicked, the corresponding method will be implemented.
3. JavaScript implements ajax
The implementation of ajax is mainly based on XMLHttpRequest, which updates the web page without reloading the page, requests data from the server after the page has been loaded, receives data from the server after the page has been loaded, sends data to the server in the background, all modern browsers ( IE7+, Firefox, Chrome, Safari, and Opera) all have XMLHttpRequest objects built in. So for <--![IF LT IE6]>, ActiveXObject needs to be used, so it needs to be judged first.
var xhr;
if (window.XMLHttpRequest) {
//If XMLHttpRequest is supported
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
Next, we mainly implement the post and get methods.
var ajax = {
//Pass in the URL, and execute the successful callback function
get: function(url, fn) {
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
post: function(url, data, fn) {
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//POST needs to set the content type
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
fn.call(this, xhr.responseText);
this will inherit the related methods of fn, that is, fn as a callback.
}
}
//post的send方法可以传递相关数据
xhr.send(data);
}
}
post进行调用，get方法类似。
var btn = document.getElementById('btn')
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
var uid = document.getElementById('uid').innerHTML;
var pass = document.getElementById('pass').innerHTML;
var url = "./login_confirm";
data = {
"uid": uid,
"pass": pass
};
var formData = "";
//需要将数据变成post能认识的类型
data = (function(value) {
for (var key in value) {
formData += key + "=" + value[key] + "&";
}
return formData;
})(data);
//Use the immediate execution function to perform the splicing process of the value
// make the call
ajax.post(url, data, function(res) {
console.log(res);
});
}
At this point, the simple implementation of ajax is basically completed.