如何实现AJAX

目录

一、定义

1. 什么是AJAX
2. 同步和异步的区别
3. Ajax的工作原理 

二、实现AJAX的5个基本步骤

      1.创建XMLHttpRequest对象

       2.向服务器发送请求

       3.服务器响应

       4.设置响应HTTP的请求状态

       5.发送请求

一、定义

1.什么是AJAX?

AJAX是异步的JavaScript和XML,它不需要重新加载整个页面就可以与服务器交换数据并更新部分网页的艺术。

2.同步和异步的区别

同步和异步是相对的概念。同步是指步骤在一个控制流序列中按顺序执行，而异步执行的过程将不再与原有的序列有顺序关系，简言之：同步是按代码顺序执行，异步是不按照代码顺序执行，并且异步执行的效率更高。

如图所示：

3.Ajax的工作原理 

二、实现AJAX的5个基本步骤

       1.创建XMLHttpRequest对象

      

//1.创建XMLHttpRequest对象
		var xhr;//定义一个变量存放XMLHttpRequest对象
		if(window.XMLHttpRequset){//判断是否是IE浏览器
			//创建IE的XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
			
		}else{
			//创建其他浏览器上的XMLHttpRequest对象
			xhr = new XMLHttpRequest();
			
		}

       2.向服务器发送请求
           GET  VS  POST?
           与POST相比，GET更简单也更快，并且大部分情况下都能用。
           在以下的情况中，请使用POST请求：
           1.无法使用缓存文件（更新服务器上的文件或数据库）
           2.向服务器发送大量数据（POST没有数据限制）
           3.发送包含位置字符的用户输入时，POST比GET更稳定也更可靠

//2.向服务器发送请求
           //open(method,url,async)
           //method：请求的类型；GET或POST
           //url:文件在服务器上的位置
           //async:是否异步处理请求 默认：true(异步）或false(同步）
		xhr.open("POST","/Jquery/changeText");

       3.设置响应HTTP的请求状态

​
 //3.当请求被发送到服务器时，我们需要执行一些基于响应的任务
		
//		当readyState改变时，就会触发onreadystatechange事件
		xhr.onreadystatechange = function()
		{
			if(xhr.readyState == 4 && xhr.status == 200)
				{
					document.getElementById("#p1").innerHTML = xhr.responseText;
				}
		}

​

     4.服务器响应

 //4.onload 请求成功时触发的事件
            xhr.onload = function ()
            {
            
                $("#p1").text(xhr.responseText);

            }

       

5.发送请求

  //5、发送请求
            xhr.send();