How to write native Ajax

How to write native Ajax: first create an XMLHttpRequest object; then write the callback function onreadystatechange; then configure the request information; and finally send the request.

Ajax (abbreviation for Asynchronous JavaScript and XML) is a web development technology that requests data asynchronously, which is very helpful for improving user experience and page performance.

Simply put, Ajax loads background data through asynchronous requests and renders it on the web page without reloading the page. Common application scenarios include form verification to log in or not. Successful entry, Baidu search drop-down box prompts, express delivery tracking number query, etc.

If you want to have a comprehensive understanding of Ajax, you can go to Js Tutorial to have a comprehensive understanding of it.

Now Ajax has become very convenient after various optimizations. For example, using Jquery only requires one line to use Ajax.

#So what does native Ajax look like?

Let’s take a look.

 <script>
	function ajax(url){
		//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
		//XMLHttpRequest对象，而是用的ActiveXObject对象
	       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
	       xhr.open("get",url,true);
	       xhr.send();//发送请求
	       xhr.onreadysattechange = () =>{
	           if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
	               if(xhr.status == 200){//返回状态码
	                   var data = xhr.responseTEXT;
	                   return data;
	               }
	           }
	       }    
	   }
</script>

readystate:

The state of XMLHttpRequest is stored. Changes from 0 to 4.

0: The request is not initialized

1: The server connection has been established

2: The request has been received

3: The request is being processed

4: Request completed and response ready

status:

200: "OK"

404: Page not found

405: Request Incorrect method

500: Server internal error

403: Request forbidden

Ajax has two request methods:

get request method

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)
			}
		}
		//open设置请求方式和请求路径
		xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步
		//send 发送
		xhr.send();
	}
</script>

post request method

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {	
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)//警告框，显示返回的Text
			}
		}
		//open设置请求方式和请求路径
		xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
		//设置请求头
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 发送
		xhr.send("userId=10");
	}
</script>

The above is the detailed content of How to write native Ajax. For more information, please follow other related articles on the PHP Chinese website!