Ajax explanations
Ajax = asynchronous JavaScript and XML.
Ajax is a technique for creating fast, Dynamic Web pages.
Ajax enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
Traditional Web pages (without Ajax) if you need to update the content, you must reload the entire page surface.
(Note: Pictures from the network)
How to use AJAX technology
First, you need to get the XMLHttpRequest
object:
var xhr;xhr = new XMLHttpRequest();
XMLHttpRequest
The object has 5 core properties:
onreadystatechange
: When the state of readiness has changed
readyState
: Prepare state, the value of this property may be a number between 0~4, 0 indicates that a connection has not been established, and 4 indicates that a response was received
status
: response code, e.g. 404, 200
responseText
: The string of the response
responseXML
: The XML of the response
When a request needs to be made, XMLHttpRequest
the object's open()
and methods are required send()
:
- Open (Request way, request path, whether asynchronous)
- Send ()
Use Demo:
// 异步检查用户名是否存在function checkUsername(username) { // 获取XMLHttpRequest对象 var xhr = new XMLHttpRequest(); var url = "check_username.do?username=" + username; // 配置onreadystatechange xhr.onreadystatechange = function() { // 当服务器已经响应(4)且响应码是200时 if (xhr.readyState == 4 && xhr.status == 200) { // 根据服务器的响应,显示响应的提示消息 if (xhr.responseText == "1") { // 表示用户名存在 document.getElementById("username_hint").innerHTML= "用户名正确"; } else { // 表示用户名不存在 document.getElementById("username_hint").innerHTML= "用户名不存在"; } } }; // 调用函数 xhr.open("GET", url, true); xhr.send();}
In jquery, there are three ways to implement Ajax:
$.ajax({ "url":"", //访问路径 "data":"", // 需要传输的数据 "type":"", // 请求方式 "dataType":"", // 返回值类型 "success":function(obj){}, // 响应成功时的回调函数 "error":function(obj){} // 响应失败时的回调函数});$.get(URL,callback);$.post(URL,data,callback);
(Note: The following content is from https://www.cnblogs.com/fly-xfa/p/5851746.html)
What are the return value types when using AJAX?
xml、html、script、JSON、jsonp、text
XML: Returns an XML document that can be processed with jQuery.
HTML: Returns plain text HTML information;
Script: Returns the plain text JavaScript
code. Results are not automatically cached. Unless the "cache" parameter is set;
Json:json Way and HTML in the request and the server is exactly the same, the return value of the request is actually a string object, there are two different, first: The HTML method does not limit the return string format, and JSON mode, must conform to the JSON protocol specification. Second: The HTML method after the request has not done any action directly callback sucuess, and JSON one more step is to add eval, execute the returned string, look at the source, data = eval_r("(" + data + ")")
return the JSON object, ( the return value of the method is JavaBean, Respond to JSON string format in response body )
Jsonp:jsonp mode of interaction with JS is the same, the xmlHttpRequest
object itself cannot be accessed across domains, but the script
label src
can be cross-domain access, there are two concepts: the first Ajax is not cross-domain operation, The second jquery Jsonp is the ability to operate across domains, what is JSONP? He is an unofficial definition of the current specification, which requires server and client to be used in conjunction;
Text: Returns a plain text string.
What are the types of return values when Ajax is detailed and when using AJAX?