侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

AJAX 基础源码记录一

2024-04-28 星期日 / 0 评论 / 0 点赞 / 32 阅读 / 3890 字

1.HTTP 请求由4部分组成: HTTP请求方法或动作(post/get方法)、 正在请求的URL 、一个可选的请求头集合,其中可能包含身份验证信息、 一个可选的请求主体 2.服务器返回的HTTP响

1.HTTP 请求由4部分组成: HTTP请求方法或动作(post/get方法)、 正在请求的URL  、一个可选的请求头集合,其中可能包含身份验证信息、 一个可选的请求主体

2.服务器返回的HTTP响应包含3个部分: 一个数字和文字组成的状态码,用来显示请求的成功和失败、一个响应头集合、响应主体

3.XMLHttpRequest 对象的open方法指定请求的两个必需部分:方法和URL。

request.open("GET",//开始一个HTTP GET请求"data.csv")        //URL的内容

4.post请求常用表单  get用于常规请求

5.post请求需要“Content-Type“头指定请求主题的MIME类型。

request.setRequestHeader("Content-Type","text/plain")

注:MIME 是服务器通知客户机传送文件是什么类型的主要方法,客户机浏览器也通过MIME告诉服务器他的参数,MIME为text/plain时浏览器将直接显示而不关心它的字体颜色。

6.XMLHttpRequest 对象的send方法发送请求。

request.send(null);

GET请求绝对没有主体,所以传递null或省略这个参数。post请求通常拥有主体,同时他应该匹配使用setRequestHeader()指定的”Content-Type“头。

7.请求的顺序

setRequestHeader()方法的调用必须在调用open()之后但在调用send之前。否则会抛出异常。

8.通过监听readystatechange事件。设置XMLHttpRequest对象的onreadystatechange属性。来判断响应是否成功。

代码分享

1.获取HTTP响应的onreadystatechage,仅对纯文本。

//获得纯文本的响应//通过getText()函数来演示如何监听readystatechange事件//发出一个HTTP GET请求以获得指定URL的内容//当响应成功到达,验证他是否是纯文本//如果是,把他传递给指定的回调函数function getText(url,callback){	var request=new XMLHttpRequest();  //创建新请求	request.open("GET",url);           //指定待获取的URL	request.onreadystatechange=function(){		//如果请求完成,则他是成功的		if(request.readyState===4&&request.status===200){			var type=request.getResponseHeader("Content-Type");			if(type.match(/^text/))     // 确保响应是文本			   callback(request.responseText);// 把它传递给回调函数		}	};	request.send(null);                      //立即发送请求}

2.获取HTTP响应的onreadystatechage升级版。可处理纯文本,解析后的XML Documment对象、解析后的JSON对象。

//通过getText()函数来演示如何监听readystatechange事件//发出一个HTTP GET请求以获得指定URL的内容//当响应成功到达,把它以解析后的XML Document对象、解析后的JSON对象//或字符串形式传递给回调函数function get(url,callback){	var request=new XMLHttpRequest();  //创建新请求	request.open("GET",url);           //指定待获取的URL	request.onreadystatechange=function(){ //定义事件监听器		//如果请求完成,则他是成功的		if(request.readyState===4&&request.status===200){			//获得响应的类型			var type=request.getResponseHeader("Content-Type");			//检查类型,这样我们不能在将来得到HTML文档			if(type.indexOf("xml")!==-1&&request.responseXML)			   callback(request.responseXML);  //Document对象响应			else if(type==="application/json")			   callback(JSON.parse(request.responseText));  //JSON响应			else			   callback(request.responseText);// 字符串响应		}	};	request.send(null);                      //立即发送请求}

 

广告 广告

评论区