AJAX请求

AJAX请求

什么是AJAX请求

AJAX即 异步 JavaScript 和 XML ，是指一种创建的交互式网页应用的网页开发技术

ajax是一种浏览器通过 js异步发起请求。局部更新页面的技术

ajax的局部更新，浏览器地址栏不会发生变化

局部更新不会舍弃原来更新的内容

function ajaxRequest(){
    1.我们首先要创建HMLHttpRequest
    var xmlhttprequest = new XMLHttpRequest();
    2.调用open方法设置请求参数
    xmlhttprequest.open("GET","请求路径"，true);  // true 异步操作  false 同步操作
    4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
    xmlhttprequest.onreadystatechange = function(){
        if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
            xmlhttprequest.responseText;
        	}
    	}
	}
    3.调用send方法发送请求
    xmlhttprequest.send();

jQuery中的AJAX请求

​ $.ajax方法
​ url -------------------表示请求的地址
​ type -----------------表示请求的类型GET或POST请求
​ data -------------------表示发送给服务器的数据

​ 格式有两种：
​ 一：name=value&name=value
​ 二：{key:value}

​ success ------------请求成功响应的回调函数
​ dataType -----------响应的数据类型

​ 常用的数据类型有：text 表示纯文本
​ xml 表示xml数据
​ json 表示json对象

$(function(){
    $("ajaxBtn").click(function(){
   		$.ajax({
          	url:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            data:"action=方法名",
            type:"GET/POST 选一个",
            success:function(data){
                alert("服务器返回的数据是：" + data);
            },
            dataType:"text"
        });     
    })
});

$.get方法和$.post方法

​ url -----------------请求的url地址
​ data ----------------发送的数据
​ callback -----------成功的回调函数
​ type ----------------返回的数据类型

$("#getBtn").click(function(){
    $.get("xxxxxxxxxxxxxxxxxxxx","action=方法名",function(data){
        
    },"json")
});

$.getJSON方法

​ url ------------------请求的url地址
​ data ---------------发送给服务器的数据
​ callback-----------成功的回调函数

$("#getJOSNBtn").click(function(){
    $.getJSON("xxxxxxxxxxxxxxxxxx","action=方法名",function(data){
        
    })
});

表单序列化 serialize

serialize( ) 可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接

$("#submit").click(function(){
    
    $("#from01").serialize();
    
    $.getJSON("xxxxxxxxxxxx","action=方法名+&" + $("#form01").serialize(),function(data){
        
    })
});