ajax快速配置
JS-Ajax快速创建
一、创建对象
XMLHttpRequest 对象
语法
let myAjax = new XMLHttpRequest();
二、设置请求行
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
有两个参数true和false
当设置为true时，为异步，在执行异步请求时可以进行其他操作
当设置为false时，为同步，在执行异步请求时不可以进行其他操作
语法
myAjax.open('get', 'respon.php');
三、设置请求头
如果是GET请求可以不设置请求头，如果是post请求则需设置请求头为
语法
myAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
四、注册回调函数
onload 事件
onload 事件会在页面或图像加载完成后立即发生。
语法
myAjax.onload = function() {
console.log(myAjax.responseText);
}
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
| status | 200: "OK"404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
五、请求主体发送
| 方法 | 描述 |
|---|---|
| send(string) | 将请求发送到服务器。 string：仅用于 POST 请求 |
语法
myAjax.send();
get请求
- get请求将请求的数据可直接放入url中
- 可以不设置请求头
- send数据为空
例：
<script>
document.querySelector('button').onclick = function() {
let myAjax = new XMLHttpRequest();
myAjax.open('get', 'respon.php?name=jack&wife=rose');
myAjax.onload = function() {
console.log(myAjax.responseText);
}
myAjax.send(null);
}
</script>
post请求
- post请求将数据放入send中进行发送
- 必须设置请求头
<script>
document.querySelector('button').onclick = function() {
let myAjax = new XMLHttpRequest();
myAjax.open('post', 'respon.php');
myAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//必须设置请求头
myAjax.onload = function() {
console.log(myAjax.responseText);
}
myAjax.send('name=jack&wife=rose');
}
</script>
jQuery-Ajax快速创建
jQuery中有三个方法可用于创建Ajax
$.ajax()方法
语法
jQuery.ajax([settings])
| 参数 | 描述 |
|---|---|
| settings | 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。 |
该方法以对象形式传入参数，虽然参数众多，但最主要的几个记住就行
| 键 | 类型 | 默认值 |
|---|---|---|
| url | String | 当前页地址。发送请求的地址。 |
| type | String | ("GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| data | String | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。大多数情况下为对象形式 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。 |
| success | Function | 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。 |
| error | Function | 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话） |
例：
<script>
$('button').first().click(function() {
$.ajax({
url: 'http://wthrcdn.etouch.cn/WeatherApi',
type: 'get',
dataType: 'xml',
data: {
city: $('input').val()
},
dataType: 'xml',
success: function(data, textStatus, jqXHR) {
console.log(data);
// console.log(textStatus);
// console.log(jqXHR);
}
})
});
$('button').eq(1).click(function() {
$.ajax({
url: 'http://wthrcdn.etouch.cn/weather_mini',
type: 'get',
dataType: 'json',
data: {
city: $('input').val()
},
success: function(data) {
console.log(data);
}
});
});
$('button').eq(2).click(function() {
$.ajax({
url: 'http://api.tianapi.com/txapi/robot/index?key=e78bcf8306ac340a8771c253f3a98097',
type: 'get',
data: {
question: $('input').val()
},
success: function(data) {
console.log(data);
}
});
});
</script>
$.get()方法
定义和用法
get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
语法
$(selector).get(url,data,success(response,status,xhr),dataType)
| 参数 | 描述 |
|---|---|
| url | 必需。规定将请求发送的哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| success(response,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象 |
| dataType | 可选。规定预计的服务器响应的数据类型。 默认地，jQuery 将智能判断。 可能的类型： "xml" "html" "text" "script" "json" "jsonp" |
$.post() 方法
定义和用法
post() 方法通过 HTTP POST 请求从服务器载入数据。
语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
| 参数 | 描述 |
|---|---|
| url | 必需。规定把请求发送到哪个 URL。 |
| data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
| success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
| dataType | 可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。 |
Ajax返回数据处理
xml文件处理
部分网站的响应报文传输的是一些xml文件，对于此类文件在接受时应设置回调函数为
xhr.responseXML
xml文件与html文件类似，解析时可使用html元素解析方法，例：
<script>
$(function() {
$('button').click(function() {
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://wthrcdn.etouch.cn/WeatherApi?city=' + $('input').val());
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let weatherText = xhr.responseXML;
// console.log(weatherText.querySelector('city').innerHTML);
// console.log($(weatherText).find('city').text());
let showText = '';
showText += $(weatherText).find('city').text() + '--';
showText += $(weatherText).find('updatetime').text() + '--';
showText += $(weatherText).find('wendu').text() + '--';
showText += $(weatherText).find('fengli').text() + '--';
showText += $(weatherText).find('shidu').text() + '--';
$('h1').text(showText);
}
}
xhr.send(null);
});
});
</script>
json文件处理
现在大部分网站使用的是json进行数据传输，json需要重点记住的是
JSON.stringify()
- JSON 通常用于与服务端交换数据。
- 在向服务器发送数据时一般是字符串。
- 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.parse()
- JSON 通常用于与服务端交换数据。
- 在接收服务器数据时一般是字符串。
- 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
例如：
<script>
$('button').click(function() {
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://wthrcdn.etouch.cn/weather_mini?city=贵阳');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let weatherText = JSON.parse(xhr.responseText);
console.log(weatherText);
let showText = '';
showText += '城市：' + weatherText.data.city;
showText += '--未来天气：' + weatherText.data.forecast[0].date;
$('h1').text(showText);
}
}
xhr.send(null);
});
</script>
Ajax返回数据原理
跨域概念
同源
一个完整的地址由协议名，ip地址，端口号组成，只要请求的地址和响应的地址中这三者相同，便称为同源
不同源
与同相反，只要三者中任意一个内容不同，便成为不同源
跨域
不同源的请求地址与响应地址请求数据便成为跨域
跨域方法
服务器添加响应头
通常来说，数据是不可以跨域发送请求的，前面用到的接口是因为服务器添加了一行方法
Access-Control-Allow-Headers: *
这是最简单的一种方法，加上这一行，便可以实现跨域请求了
jsonp
jsonp的原理是html中，可以通过src属性进行跨域请求，于是便可以在js中先定义一种方法来接收参数，然后在script中通过src来发送请求，服务器响应的数据将会以js的方式进行回送，这时定义的方法便可以执行，以达到接收数据的目的
jQuery的ajax方法中也可很方便的接收参数，加上
dataType: 'jsonp'
便可实现
