ajax原生

1.同步/异步

2.XHR对象

var request = new XMLHttpRequest();

//兼容不同浏览器伪代码

if(window.xhr)

{

request= new XMLHttpRequest();

}else{

request= new ActivexObject(Microsoft.XMLHttp);//IE5,IE6

}

3.http请求

tcp连接步骤:牵手

  1. 浏览器->web服务器发送请求命令
  2. 浏览器->web服务器头信息
  3. web服务器应答->浏览器
  4. web服务器应答头信息->浏览器
  5. web服务器发送数据->浏览器
  6. web服务器关闭连接
请求4要素

  1. 方法get/post
  2. url
  3. 客户端环境信息,身份
  4. 请求正文  

 GET:用于信息获取,url传值,2000字符内,安全,查询,显示在url

 POST:修改服务器资源,信息数量无限制

http请求包含:状态码(文字或数字),响应头,响应体

状态码一般由三位数字构成

4.XHR对象的方法(http代码实现步骤

  1. open(method,url,async)
  2. setRequestHeaeder(“Content-Type”,“??”)//设置头信息 ,post方法需要
  3. send(arg0)//post方法才要参数

5.取得响应

  • responeseText:字符串形式响应
  • responeseXML:获得XML形式响应
  • status/statusText:获得状态码
  • getAllResponseHeader():获取所有响应报头
  • getResponseHeader(?):某响应报头

6.监听readyState属性来确认是否牵手成功:

属性值有:

  • 0:请求未初始化,open还没调用;(0-1这个过程有些浏览器不会被触发)
  • 1服务器连接已建立,open已经调用了;
  • 2请求已接受,也就是收到头信息了;
  • 3请求处理中,也就是接收到响应主体了;
  • 4请求已完成,且响应已就绪,也就是响应完成了

注意:

  • get请求中,通过把表单中的值放在open方法的第二个参数url后面,通过加?隔开

比如request.open("GET","serversent.php?number="+document.getElementById("keyword").value);

  • post方法中,设置变量data,通过send(data)来发送数据。data格式:属性+值&属性+值&属性+值
  • post方法需要用setRequestHeaeder(“Content-Type”,“??”)//来设置头信息

此方法必须在open()和send()之间使用

eg:表单的是:request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

7.通过写onreadystatechange属性来

request.onreadystatechange=function (){

if(request.readysate===4){

if(request.readystatus===200)

{do something;

return;}

}else{出现错误;}

}

小技巧:查看f12


点击文件,查看状态



引入json



  • 解析json字符串:eval(),JSON.parse()

              1. eval()不仅解析json,还执行json中的方法,危险,慎用
              2. JSON.parse() 如果json对象中有函数,会报错
  • 校验工具:jsonlint.com
  • json格式

'{"success"键值可以作为请求成不成功

“errormsg”可以作为请求失败返回的错误信息

“data”可以作为请求返回的数据

}'


### 使用原生 JavaScript 实现 AJAX 请求 #### 创建 XMLHttpRequest 对象 为了发起 AJAX 请求,首先需要创建一个 `XMLHttpRequest` 对象。这个对象用于与服务器交换数据。 ```javascript var xhr; if (window.XMLHttpRequest) { // 处理除 IE5 和 IE6 之外的情况 xhr = new XMLHttpRequest(); } else { // 特殊处理 IE5 和 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } ``` #### 打开连接并发送请求 一旦创建了 `XMLHttpRequest` 对象,下一步就是打开到服务器的 URL 连接,并指定 HTTP 方法(GET 或 POST)。这一步骤还涉及设置是否异步执行该操作以及其他可选参数如用户名和密码[^4]。 ```javascript xhr.open("GET", "example.php", true); xhr.send(); ``` 对于带有查询字符串的 GET 请求或者包含表单数据的 POST 请求,则需进一步配置: - **GET 请求** 将参数附加于 URL 后面作为查询字符串传递给服务器。 ```javascript var params = "?name=John&age=30"; xhr.open("GET", "example.php" + params, true); ``` - **POST 请求** 设置正确的头部信息来告知服务器即将接收的数据类型;随后通过 send() 函数提交实际要传送的内容。 ```javascript xhr.open("POST", "example.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var params = "name=John&age=30"; xhr.send(params); ``` #### 接收响应 当从服务器收到回复时,可以通过监听 readyState 属性的变化以及 status 状态码来判断请求的状态。通常会在 onreadystatechange 事件处理器内部完成这些逻辑检查工作[^1]。 ```javascript xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 输出返回的结果文本 } }; ``` 以上即为使用原生 JavaScript 构建基本 AJAX 功能的方式概述。尽管现代浏览器提供了更简洁易用的 Fetch API 来替代传统的 XHR 方式,但对于理解底层机制而言,掌握上述过程仍然是非常有价值的[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值