Ajax在jQuery中的用法

淩亂°似流年 2023-02-19 01:24 11阅读 0赞

### Ajax在jQuery中的用法 ###

*  Ajax在jQuery中的用法
 *   *  1 $.ajax()方法
     *   *  1.1 ajax方法基本使用
         *  1.2 ajax传递请求参数
         *  1.3 beforeSend方法
         *  1.4 serialize方法
     *  2 get、post和jsonp请求
     *   *  2.1 get、post请求
         *  2.2 $.ajax方法发送jsonp请求
     *  3 全局事件
     *  4 RESTful与XML基础
     *   *  4.1 RESTful API的应用
         *  4.2 XML介绍

# Ajax在jQuery中的用法 #

## 1 $.ajax()方法 ##

### 1.1 ajax方法基本使用 ###

$.ajax({ 
    	// 请求方式
    	type: 'post',
    	// 请求地址
    	url: '/base',
    	// 请求成功以后函数被调用
    	success: function (response) { 
    		// response为服务器端返回的数据
    		// 方法内部会自动将json字符串转换为json对象
    		console.log(response);
    	},
    	// 请求失败以后函数被调用
    	error: function (xhr) { 
    		console.log(xhr)
    	}
    })
    
    //服务器端代码如下（访问成功与失败）：
    app.get('/base', (req, res) => { 
    	res.send({ 
    		name: 'zhangsan',
    		age: 30
    	})
    });
    app.post('/base', (req, res) => { 
    	res.status(400).send({ 
    		name: 'zhaoliu',
    		age: 35
    	})
    });

### 1.2 ajax传递请求参数 ###

$.ajax({ 
    	// 请求方式
    	type: 'post',
    	// 请求地址
    	url: '/user',
        // 向服务器端发送的请求参数
    	// name=zhangsan&age=100
    	// data: { 
    	// name: 'zhangsan',
    	// age: 100
    	// },
    	data: JSON.stringify(params),
    	// 指定参数的格式类型
    	contentType: 'application/json',
    	// 请求成功以后函数被调用
    	success: function (response) { 
    		// response为服务器端返回的数据
    		// 方法内部会自动将json字符串转换为json对象
    		console.log(response);
    	}
    })
    
    //服务器端代码（req.query用来获取get方法传递的参数）：
    app.get('/user', (req, res) => { 
    	res.send(req.query);
    });
    //req.body用来获取post方法传递的参数
    app.post('/user', (req, res) => { 
    	res.send(req.body)
    });

### 1.3 beforeSend方法 ###

在请求发送之前调用。

// 在请求发送之前调用
    beforeSend: function () { 
    	alert('请求不会被发送')
    	// 请求不会被发送
    	return false;
    },

### 1.4 serialize方法 ###

作用：将表单中的数据自动拼接成字符串类型的参数。

$('#form').on('submit', function () { 
    // 将表单内容拼接成字符串类型的参数
    // var params = $('#form').serialize();
    // console.log(params)
    serializeObject($(this));
    return false;
    });

函数的代码如下：

// 将表单中用户输入的内容转换为对象类型
    function serializeObject (obj) { 
    	// 处理结果对象
    	var result = { };
    	// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
    	var params = obj.serializeArray();
    	// 循环数组 将数组转换为对象类型
    	$.each(params, function (index, value) { 
    		result[value.name] = value.value;
    	})
    	// 将处理的结果返回到函数外部
    	return result;
    }

## 2 get、post和jsonp请求 ##

### 2.1 get、post请求 ###

$('#btn').on('click', function () { 
    			// $.get('/base', 'name=zhangsan&age=30', function (response) { 
    			// console.log(response)
    			// })
    			
    			$.post('/base', function (response) { 
    				console.log(response)
    			})
    		});

### 2.2 $.ajax方法发送jsonp请求 ###

服务器端代码：

app.get('/jsonp', (req, res) => { 
    	const cb = req.query.cb
    	const data = cb+"({name: 'zhaoliu'})"
    	res.send(data);
    	// res.jsonp({ 
    	// name: 'lisi',
    	// age:50
    	// })
    });

## 3 全局事件 ##

只要页面中有Ajax请求被发送，对应的全局事件就会被触发。

.ajaxStart()     // 当请求开始发送时触发
    .ajaxComplete()  // 当请求完成时触发

NProgress：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情！

## 4 RESTful与XML基础 ##

### 4.1 RESTful API的应用 ###

一套关于设计请求的规范：

*  GET： 获取数据
 *  POST： 添加数据
 *  PUT： 更新数据
 *  DELETE： 删除数据

服务器端的代码：

// 获取用户列表信息
    app.get('/users', (req, res) => { 
    	res.send('当前是获取用户列表信息的路由');
    });
    
    // 获取某一个用户具体信息的路由
    app.get('/users/:id', (req, res) => { 
    	// 获取客户端传递过来的用户id
    	const id = req.params.id;
    	res.send(`当前我们是在获取id为${ id}用户信息`);
    });
    
    // 删除某一个用户
    app.delete('/users/:id', (req, res) => { 
    	// 获取客户端传递过来的用户id
    	const id = req.params.id;
    	res.send(`当前我们是在删除id为${ id}用户信息`);
    });
    
    // 修改某一个用户的信息
    app.put('/users/:id', (req, res) => { 
    	// 获取客户端传递过来的用户id
    	const id = req.params.id;
    	res.send(`当前我们是在修改id为${ id}用户信息`);
    });

客户端的代码：

// 获取用户列表信息
    $.ajax({ 
    	type: 'get',
    	url: '/users',
    	success: function (response) { 
    		console.log(response)
    	}
    })
    
    // 获取id为1的用户信息
    $.ajax({ 
    	type: 'get',
    	url: '/users/1',
    	success: function (response) { 
    		console.log(response)
    	}
    })
    
    // 获取id为1的用户信息
    $.ajax({ 
    	type: 'delete',
    	url: '/users/10',
    	success: function (response) { 
    		console.log(response)
    	}
    })
    
    // 获取id为1的用户信息
    $.ajax({ 
    	type: 'put',
    	url: '/users/10',
    	success: function (response) { 
    	console.log(response)
    	}
    })

### 4.2 XML介绍 ###

XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。  
服务器端代码如下：

app.get('/xml', (req, res) => { 
    	res.header('content-type', 'text/xml');
    	res.send('<message><title>消息标题</title><content>消息内容</content></message>')
    });

客户端代码如下：

<button id="btn">发送请求</button>
    <div id="container"></div>
    <script type="text/javascript">
    	var btn = document.getElementById('btn');
    	var container = document.getElementById('container');
    		btn.onclick = function () { 
    		var xhr = new XMLHttpRequest();
    		xhr.open('get', '/xml');
    		xhr.send();
    		xhr.onload = function () { 
    			// xhr.responseXML 获取服务器端返回的xml数据
    			var xmlDocument = xhr.responseXML;
    			var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
    			container.innerHTML = title;
    		}
    	}
    </script>