Ajax基础1

最新推荐文章于 2024-09-23 14:48:30 发布

草莓味的狮子座leo

最新推荐文章于 2024-09-23 14:48:30 发布

阅读量112

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/Mikon_0703/article/details/110259742

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax=异步javascript+XML
ajax是一种无需重新加载整个页面，能够刷新部分网页的技术
一、发送ajax请求的五个步骤
1）创建异步对象，XMLHttpRequest 对象
2）设置请求参数，包括请求url，请求方法post、get
3）发送请求
4）注册事件， onreadystatechange事件状态改变时就会调用
5）获取返回的数据
二、ajax工作原理

<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText) 字符串形式
			xhr.responseXML  获得XML形式的响应数据
		}
	</script>

创建XMLHttpRequest对象var xhr = new XMLHttpRequest();
向服务器发送请求 xhr.open('get', 'http://localhost:3000/first'，true);
xhr.send();
true：异步 false：同步
get请求：url包含请求参数
post请求：使用 setRequestHeader() 来添加 HTTP 头，在 send() 方法中规定您希望发送的数据

xmlhttp.open("POST","...url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

服务器响应
XMLHttpRequest 对象的 responseText或 responseXML 属性。
onreadystatechange 事件

每当 readyState 改变时，就会触发 onreadystatechange 事件；readyState 属性存有 XMLHttpRequest 的状态信息

readyState从0-4发生变化
0：请求未初始化
1:服务器建立连接
2:请求已接收
3:请求处理中
4:请求已完成，响应就绪
status
200:ok
404:未找到页面

xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}

回调函数
回调函数是一种以参数形式传递给另一个函数的函数

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xhr.readyState==4 && xhr.status==200)
        {
            document.getElementById("myDiv").innerHTML=xhr.responseText;
        }
    });
}