ajax的用法

原生JS中-----例子

1.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();

1.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");

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){
				
			}
		});