ajax的两种写法

古城微笑少年丶 2022-03-27 05:37 299阅读 0赞

一、原生ajax的实现

1.什么是ajax？

ajax是异步的javas和xml（ Asynchronous JavaScript And XML）。

通过在后台与服务器进行小量的数据交换，ajax可以使网页实现异步更新。就是说可以在不刷新页面的情况下，对页面的某个部分进行刷新。

2.ajax与服务器交换数据的过程是怎么样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

交互的过程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2][]

readyState 对象状态值

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

4、ajax有哪些方法使用

<table> 
 <tbody> 
  <tr> 
   <td> <p>方&nbsp;&nbsp;&nbsp;&nbsp;法</p> </td> 
   <td> <p>描&nbsp;&nbsp;&nbsp;&nbsp;述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>abort()</p> </td> 
   <td> <p><span style="color:#333333;">停止当前请求&nbsp;</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#333333;">getAllResponseHeaders()</span></p> </td> 
   <td> <p><span style="color:#333333;">把HTTP请求的所有响应首部作为键/值对返回</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#333333;">getResponseHeader("header")</span></p> </td> 
   <td> <p><span style="color:#333333;">返回指定首部的串值</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#333333;">open("method","URL",[asyncFlag],["userName"],["password"])&nbsp;</span></p> </td> 
   <td> <p><span style="color:#333333;">建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#333333;">send(content)</span></p> </td> 
   <td> <p><span style="color:#333333;">向服务器发送请求</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#333333;">setRequestHeader("header", "value")</span></p> </td> 
   <td> <p><span style="color:#333333;">把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )</span></p> </td> 
  </tr> 
 </tbody> 
</table>

5、使用ajax的步骤是怎么样的？

1）创建xhrHTTPRequest对象

2）使用open方法设置和服务器的交互信息

3）设置发送的数据，开始和服务器端交互

4）处理当服务器传数据过来

5）更新界面

6、如何书写

1）get方法

var xhr = new XMLHttpRequest();//创建对象

xhr.open('GET',url+""+data,true);//设置请求的参数，第一个是方式，第二个是地址，这个参数可以带上一些参数，动态的提交数据,第三个为是否异步

xhr.onreadystatechange = function () \{//当状态改变的时候调用

if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304)\{

fn.call(this,xhr.responseText);//成功时调用的方法

\};

xhr.send();//发送请求

2）post方法

var xhr = new XMLHttpRequest();

xhr.open('POST',url,true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//一定要设置不然，phppost获取不到数据

xhr.onreadystatechange = function () \{

if (xhr.readyState == 4 && xhr.status == 200|| xhr.status == 304)\{

fn.call(this,xhr.responseText);//成功时调用的方法

\};

xhr.send(data);

3）整合起来

var Ajax = \{

get:function (url,fn,data) \{

var xhr = new XMLHttpRequest();//创建对象

xhr.open('GET',url+"?"+data,true);//设置请求的参数，第一个是方式，第二个是地址，这个参数可以带上一些参数，动态的提交数据,第三个为是否异步

xhr.onreadystatechange = function () \{//当状态改变的时候调用

if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304)\{

fn.call(this,xhr.responseText);//成功时调用的方法

\};

xhr.send();//发送请求

\},

post:function (url,data,fn) \{

var xhr = new XMLHttpRequest();

xhr.open('POST',url,true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//一定要设置不然，phppost获取不到数据

xhr.onreadystatechange = function () \{

if (xhr.readyState == 4 && xhr.status == 200|| xhr.status == 304)\{

fn.call(this,xhr.responseText);//成功时调用的方法

\};

xhr.send(data);

\};

所有代码

ajax.html

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</select>

</select>

</div>

var Ajax = \{

get:function (url,data,fn) \{

var xhr = new XMLHttpRequest();//创建对象

xhr.open('GET',url+data,true);//设置请求的参数，第一个是方式，第二个是地址，这个参数可以带上一些参数，动态的提交数据,第三个为是否异步

xhr.onreadystatechange = function () \{//当状态改变的时候调用

if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304)\{

fn.call(this,xhr.responseText);//成功时调用的方法

\};

xhr.send();//发送请求

\},

post:function (url,data,fn) \{

var xhr = new XMLHttpRequest();

xhr.open('POST',url,true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//一定要设置不然，phppost获取不到数据

xhr.onreadystatechange = function () \{

if (xhr.readyState == 4 && xhr.status == 200|| xhr.status == 304)\{

fn.call(this,xhr.responseText);//成功时调用的方法

\};

xhr.send(data);

\};

function getProvinces(value) \{

var province = value;

console.log(province);

// Ajax.post("getCity.php","province="+province,setCity);//这里的province一定要写成name=value的形式

Ajax.get("getCity.php?","province="+province,setCity);

var citySle = document.getElementById("citys");

citySle.options.length = 0;

citySle.value = "";

function setCity(provinces) \{

console.log(provinces);

provinces = JSON.parse(provinces);

var citySlect = document.getElementById("citys");

for (var item of provinces)\{

var option = document.createElement("option");

console.log(item);

var curname = item.name;

var curid = item.id;

option.innerText = curname;

option.id = item.id;

citySlect.appendChild(option);

</script>

</body>

</html>

getCity.php

<?php

/\*\*

\* Created by PhpStorm.

\* User: lwl

\* Date: 2019/1/12

\* Time: 9:10

\*/

//$province = $\_POST\["province"\];

$province = $\_GET\["province"\];

if ($province)\{

$json = file\_get\_contents("citys.json");

$data = json\_decode($json,true);

foreach ($data as $key=>$value)\{

if ($value\["provinces"\] == $province)\{

echo json\_encode($value\["citys"\],true);

citys.json

"provinces":"guangdong",

"citys":\[

"name":"惠州",

"id":"huizhou"

\},

"name":"广州",

"id":"guanghzhou"

\},

"name":"深圳",

"id":"shenzhen"

\},

"name":"佛山",

"id":"foshan"

\},

"provinces":"fujian",

"citys":\[

"name":"厦门",

"id":"xiamen"

\},

"name":"福州",

"id":"fuzhou"

\},

"name":"莆田",

"id":"putian"

\},

"name":"泉州",

"id":"quanzhou"

\},

"provinces":"jiangsu",

"citys":\[

"name":"南京",

"id":"nanjing"

\},

"name":"无锡",

"id":"wuxi"

二、jquery 的ajax

1.ajax

ajax( url \[, settings \] )

参数用\{\}括起来

常用参数：

\* accepts-->接收服务器返回的数据类型

\* async-->默认情况下，所有请求都为异步（true）

\* beforeSend-->请求发送前的回调函数

\* cache-->浏览器是否缓存此页面

\* complete（always(）-->请求完成后的回调函数，这个函数可以接收一个函数的数组，每个函数被依次调用。

\* contents-->一个以"\{字符串/正则表达式\}"配对的对象，根据给定的内容类型，解析请求的返回结果

\* contentType-->发送信息到服务器的时候内容编码形式（默认: 'application/x-www-form-urlencoded; charset=UTF-8'）；你必须在服务器端进行适当的解码。

\* context-->用来设置ajax相关回调函数的上下文（这个上下文就是dom树中的一个元素），用这个上下文来指定回调函数所应用的对象（就是哪些区域需要被改变）

\* data，给服务器传送的数据，将会被自动转换成字符串格式，

\* dataType：预期服务器返回的数据类型。如果不指定，jQuery将会自动根据HTTP包中的MIME来判断

\* error（fail()）：请求失败时调用的函数，有三个参数（对象，描述错误符，捕获的一层的对象）

\* passwor：响应http请求的时候认证密码

\* success（done()）：响应成功时调用的函数

\* timeout：设置请求超时时间

\* type：请求方式（POST,GET）

\* url：发送请求的地址

\* username：响应http访问认证请求的用户名

<?php

if (isset($\_POST\["name"\]))\{

echo "this is form ajax: ".$\_POST\["name"\]."and her age is ".$\_POST\["age"\];

\}else\{

echo "args error";

</form>

$("\#submit").click(function () \{

$.ajax(\{

type:"post",

url:"index.php",

data:\{

name:$("\#name").val(),

age:$("\#age").val()

\},

success:function (data) \{

console.log(data);

\},

error:function () \{

console.log("请求服务器失败");

\},

complete:function () \{

console.log("ajax请求完成啦");

\});

</script>

可以看到当我们把地址修改了之后，也就是服务器不能连通之后，就会调用error函数。

![20190112104308703.gif][]

或者像下面这样，使用done，fail和always函数

$("\#submit").click(function () \{

$.ajax(\{

type:"post",

url:"index.php",

data:\{

name:$("\#name").val(),

age:$("\#age").val()

\}).done(function (data) \{

console.log(data);

\}).fail(function () \{

console.log("调用函数失败");

\}).always(function () \{

console.log("不管你成不成都得调用我哈哈哈");

\});

![20190112104308716.gif][]

2.post()

jQuery.post( url \[, data \] \[, success(data, textStatus, jqXHR) \] \[, dataType \] )，使用一个HTTP POST 请求从服务器加载数据。

这个操作相当于上面ajax操作的type设置为post

参数如下

\* url：发生请求的地址

\* data：向服务器发送的数据

\* success（data,textStatus,jqXHR）:请求成功后执行的回调函数

\* dataType：从服务器预期返回的数据类型

拥有的函数集合跟ajax一样，如done()，fail（），always（）；

$("\#submit").click(function () \{

var data = "";

$.post(

"index.php",

name:$("\#name").val(),

age:$("\#age").val()

\},

function (data) \{

console.log(data);

);

\});

或者

$("\#submit").click(function () \{

$.post("index.php",\{name:$("\#name").val(),age:$("\#age").val()\}).done(function (data) \{

console.log(data);

\}).fail(function () \{

console.log("调用函数失败");

\}).always(function () \{

console.log("不管你成不成都得调用我哈哈哈");

\});

3.get和post一样

但是服务器代码要用get来接收

f (isset($\_GET\["name"\]))\{

echo "this is form ajax: ".$\_POST\["name"\]."and her age is ".$\_GET\["age"\];

\}else\{

echo "args error";

$("\#submit").click(function () \{

$.get("index1.php",\{name:$("\#name").val(),age:$("\#age").val()\}).done(function (data) \{

console.log(data);

\}).fail(function () \{

console.log("调用函数失败");

\}).always(function () \{

console.log("不管你成不成都得调用我哈哈哈");

\});

$("\#submit").click(function () \{

var data = "";

$.get(

"index.php",

name:$("\#name").val(),

age:$("\#age").val()

\},

function (data) \{

console.log(data);

);

\});

![20190112104308875.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220327/9f4262bfeff34fc38549cf6cfc981e7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220327/25a752ef7dff4daa963ce69297c2884e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20220327/56fd65f82eba49ce99123786fe3450ea.png
[20190112104308703.gif]: /images/20220327/6e04e02fbef64ef1b8592a69f36b4588.png
[20190112104308716.gif]: /images/20220327/0fe550637b93441fb6ddec380384c1a1.png
[20190112104308875.gif]: /images/20220327/2af2b7f10b2b44a6a8b1b670dd6f698a.png