JavaScript的ajax知识

1 原生JS

2.1 get

			
				/* 1 创建xhr*/
				var xhr = new XMLHttpRequest();
				/*2 打开连接 */
				xhr.open("GET", "./dem.text", false);
				/* 3监听状态 */
				xhr.onreadystatechange = function() {
					if (xhr.status == 200 && xhr.readyState == 4) {
						content.innerHTML = xhr.responseText;
						console.log(xhr.responseText)
					}
				}

				/* 4. 发送 */
				xhr.send();

2.2 post

• xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)，这个的目的是告诉服务器端该请求是一个post请求，防止被服务器认为是get而报错。

				var xhr = new XMLHttpRequest();
				var name = document.getElementById("name").value;
				var age = document.getElementById("age").value;
				var xhr = new XMLHttpRequest();
				xhr.open("post", "http://520mg.com/ajax/echo.php");
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				xhr.onreadystatechange = function() {
					if (xhr.status == 200 && xhr.readyState == 4) {
						content.innerHTML = xhr.responseText;
						console.log(xhr.responseText)
					}
				}
				xhr.send("name=mumu&age=18");

2 jquery的ajax

2.1 上层ajax

2.1.1 load() 用于加载html

			//目标 ： 单击加载be.html    neirong放在con中
			$(function(){
				$("#btn1").click(function(){
					$(".con").load("./be.html ")
					// $(".con").load("./be.html .content")
				})
			})

2.1.2 $.getScript() 加载js

			$(function(){
				$("#btn2").click(function(){
					$.getScript("./script.js");//执行script.js的内容
				})
			})
		

2.1.3 $.getJSON() 加载json

			//单击按钮 加载be.json   放入con2中
			$(function(){
				$("#btn3").click(function(){
					$.getJSON("./be.json",function(data,status,xhr){
						console.log(data,status,xhr);
						// data be.json  里面的数据
						// status 状态  success  成功
						// xhr 封装好的jquery  xhr对象
						// JSON.stringify  把js对象转换字符串
						$(".con2").text(JSON.stringify(data));
					})
				})
			})
	

2.2 中层ajax

2.2.1 $.get()

• done fail always

        $(function() {
            $("button").click(function() {
                $.get("./be.txt").done(res => {
                    $(".con").text(res);
                }).fail(err => {
                    console.log(err)
                }).always(xhr => {
                    console.log("成功失败都执行", xhr);
                })

            })



        })

• 普通方法

 $("button").click(function() {
            $.get("./be.txt", function(data, status, xhr) {
                 if (status == "success") {
                    $(".con").text(data);
                }

            })
         })

• then catch

 $(function() {
            $("button").click(function() {
                $.get("./be.txt").then(res => {
                    $(".con").text(res);
                }).catch(err => {
                    console.log(err)
                })

            })
        })

2.2.2 $.post()

 $(function() {
            $("#btn").click(function() {


                $.post("https://www.520mg.com/ajax/echo.php", `name=${$("#name").val()}&age=${$("#age").val()}`)
                    .then(res => {
                        $(".con").text(res);
                    }).catch(err => {

                        console.log(err);
                    })


            })

        })

3.3 底层ajax

mui.ajax('url',{
				data:{
					
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					
				},
				error:function(xhr,type,errorThrown){
					
				}
			});