ajax技术

Ajax请求

什么是Ajax请求

异步无刷新请求 转发和重定向

• AJAX=Asynchronous JavaScrpit and Xml （异步的javaScript和Xml）
• AJAX就是页面不需要重新加载，能够更新部分的网页的技术
• 不是一种新的编程语言，而是一种用于更好的更快的创建以及交互性更强的web应用程序的技术
• 传统的网页，想要更新内容或者要提交表单，就要重新加载整个网页
• 通过ajax技术的网页就可以在后台服务器进行少量数据的交换，就可以实现异步的局部更新

初体验

<script>
	function go(){	document.getElementByid("iframe1").src='www.baidu.com'
	}
</script>
<div>
	<p>请输入地址</p>
	<p>
		<input type='text' id='url' value='www.baidu.com'>
		<input type='button' value='提交' onclik='go'>
	</p>
</div>
<div>
<iframe id='iframe1' style='width:300px;hight:600px'></iframe>
</div>

原生Ajax

ajax的核心是xmlHttpRequest对象

使用框架简化开发

除了原生的AJAX，还有许多流行的JavaScript框架可以简化AJAX的开发。例如，使用jQuery框架可以简化AJAX的调用代码：
引入jquery
jquery调用ajax方法：

格式$.ajax({});

参数：

• type 请求的方式GET
• url: 请求地址 url
• async: 是否异步，默认是 true 表示异步 也可以做同步
• data: 发送到服务器的数据
• dataType: 预期服务器返回的数据类型
• contentType: 设置请求头
• success: 请求成功时调用此函数
• error: 请求失败时调用此函数

模拟的数据

get请求

<boby>
    <button type="button" id='btn'>
        查询数据
    </button>
</boby>
//点击按钮发送ajax请求将数据显示
<script>
    $("#btn").click(function{
            $.ajax({
            type:"get",//请求方式
            url:"js/data.txt",//请求地址
            data:{//请求数据，json  如果没有参数可以不写

            },
            //调用成功调用的函数
            success: function(data) {//形参名字，代表返回的数据
                console.log(data)//因为文本内容是字符串字符串
                //将字符串转化成json对象
                var obj=JSON.parse(data)
                console.log(obj)

                var ul = $("<ul></ul>");
                // 遍历返回的数据数组
                for(var i = 0; i < obj.length; i++) {
                    // 得到数组中的每一个元素
                    var user = obj[i];
                    // 创建li元素
                    var li = "<li>"+user.userName+"</li>";
                    // 将li元素设置到ul元素中
                    ul.append(li);
                }
                console.log(ul);
                // 将ul设置到body标签中
                $("body").append(ul);
            }
        });
    })
</script>

上述示例中，通过$.ajax函数进行AJAX的调用，将请求的URL和请求成功后的处理函数作为参数传递。使用jQuery的语法可以更加简洁地实现AJAX的功能

$.get

这是一个简单的 GET 请求功能以取代复杂 $.ajax。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
请求 json 文件，忽略返回值

$.get('js/data.json');

请求 json 文件，传递参数，忽略返回值

$.get('js/data.json', 
      {name:"tom", age:100}
     );

请求 json 文件，拿到返回值，请求成功后可拿到返回值

$.get('js/data.json',
      function(data){
    console.log(data);
});

请求 json 文件，传递参数，拿到返回值

$.get('js/data.json',
      {name:"tom", age:100},
      function(data){
   		 console.log(data);
});

post请求把get换成post即可

getjson请求把get换成json即可要求服务器返回一个json格式