ajax简单使用

Ajax

1. 标准请求响应时浏览器的动作(同步操作)
   • 浏览器请求什么资源,跟随显示什么资源
2. ajax:异步请求
   • 局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容
3. ajax 由 javascript 推出的
   • 由 jquery 对 js 中 ajax 代码进行的封装,达到使用方便的效果
4. jquery 中 ajax 分类
   • 第一层 $.ajax({ 属性名:值,属性名:值})
     • 是 jquery 中功能最全的.代码写起来相对最麻烦的
     • 示例代码

/*
url:请求服务器地址 
data:请求参数(数据) 
dataType:服务器返回数据类型 
error:请求出错执行的功能 
success:请求成功执行的功能,
function(data),data服务器返回的数据
type:请求方式
*/
$("a").click(function(){ 
    $.ajax({ url:'demo',
            data:{"name":"张三"}, 
            dataType:'html', 
            error:function(){
                alert("请求出错.")
            }, 
            success:function(data){
                alert("请求成功"+data)
            }, 
            type:'POST' 
           }); 
    return false;
});

• 第二层(简化$.ajax)
  • $.get(url,data,success,dataType))
  • $.post(url,data,success,dataType)
• 第三层(简化$.get())
  • $.getJSON(url,data,success).相当于设置$.get中dataType=”json”
  • $.getScript(url,data,success)相当于设置$.get dataType=”script”

5. 如果服务器返回数据是从表中取出.为了方便客户端操作返回的数
   据,服务器端返回的数据设置成 json
   • 客户端把 json 当作对象或数组操作
6. json:数据格式
   • JsonObject:json 对象,理解成 java 中对象
     • {“key”:value,”key”:value}
   • JsonArray:json 数组
     • [{“key”:value,”key”:value},{}]

各种处理方式

1. js方式实现(不推荐)

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

XMLHttpRequest对象实现

XMLHttpRequest对象的方法：

• open(方法名(提交方式get/post),服务器地址,true) :与服务端建立连接

  1. 方法名:GET 或 POST
  2. true表示异步

• send():将请求发送到服务器

  1. get方式:send(null),get不需要传递参数
  2. post方式:send(参数值),post要参数

• setRequestHeader(header,value):

  1. get:不需要设置此方法
  2. post:需要设置：
  • 如果请求元素中包含了文件上传
    setRequestHeader("Content-Type","multipart/form-data");
  • 如果请求元素中不包含文件上传
    setRequestHeader("Content-Type","application/x-www-form-urlencoded")

XMLHttpRequest对象的属性：

• readyState:请求状态(0,1,2,3,4)只有状态为4时代表请求完毕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTqtf7p7-1573961885647)(image\请求状态.png)]

status:响应状态 只有200 代表响应正常

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5JhjX8Xl-1573961885649)(image\响应状态.png)]

onreadystatechange:回调函数
responseText：响应格式为String
responseXML：响应格式为XML

2. jquery方式实现(推荐)

• $.ajax({})

$.ajax({
    url:服务器地址,
    请求方式:get|post,
    data:请求数据,
    success:function(result,testStatus){
        
    },
    error:function(xhr,errrorMessage,e){
        
    }
});

• $.get()

$(selector).get(
    url,
    data,
    success(
        response,status,xhr
    ),
    dataType
);
/*
url:必需。规定将请求发送的哪个URL
data:可选。规定连同请求发送到服务器的数据
success:可选。规定当请求成功时运行的函数
dataType:可选。规定预计的服务器响应的数据类型,默认地，jQuery将智能判断。
			可能的类型："xml","html","text","script","json","jsonp"
*/

• $.post()

$.post(
    url,/*服务器地址*/
    data,/*请求数据*/
    success(/*function (result){...},*/
        data, textStatus, jqXHR
    ),
    dataType/*默认执行智能判断（xml、json、script 或 html）*/
);

• $(xxx).load()

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

还存在一个名为load的 jQuery 方法。调用哪个，取决于参数。

$(xxx).load(
    url,
    data,
    function(
    response,status,xhr)
);
/*
url:必须。规定要将请求发送到哪个URL
data:可选。规定连同请求发送到服务器的数据。
function(response,status,xhr):可选。规定当请求完成时运行的函数。
	额外的参数：
	response - 包含来自请求的结果数据
    status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
    xhr - 包含 XMLHttpRequest 对象
*/

• $.getJSON()

$.getJSON(
    url,
    data, /*JSON格式的请求数据*/
    success(
        data,status,xhr
    )
);

包含 XMLHttpRequest 对象
*/

+ $.getJSON()

```javascript
$.getJSON(
    url,
    data, /*JSON格式的请求数据*/
    success(
        data,status,xhr
    )
);