ajax发送什么请求,Ajax发送请求

1，什么是ajax？

Asynchronous JavaScript and XML(当然现在xml已经由json代替)；

主要是用于前后台的交互(表单提交已经被废弃)；

使用场景：前台获取数据、表单的失焦验证；

2，如何在有服务的环境下使用ajax发送请求

1.创建ajax对象-xmlhttprequest对象：(分为两种类型)

在新版本的浏览器中：variable=new XMLHttpRequest();

老版本的IE中：variable=new ActiveXObject("Microsoft.XMLHTTP");

所以在这里我们需要考虑到兼容性的问题：

varxhr;if(window.XMLHttpRequest){ //常规，如果有，直接使用

xhr = newXMLHttpRequest();

}else{ //如果没有，老版本IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

console.log(xhr)

console.log("状态码:" +xhr.readyState);

console.log(‘响应码：‘ +xhr.status);

console.log(‘响应文本:‘ +xhr.responseText);

console.log(‘步骤一完成‘)

2.通过监听ajax的状态的改变来监听：

xhr.onreadystatechange = function(){

console.log(‘xhr的状态码发生了改变‘);

console.log("状态码:" +xhr.readyState);

console.log(‘响应码：‘ +xhr.status);

console.log(‘响应文本:‘ +xhr.responseText);

console.log(‘\n‘);

}

console.log(‘步骤二完成‘)

3.创建请求的消息，连接服务器

xhr.open(‘GET‘,‘07.PHP‘,true); //最后一个参数是bool，表示同步||异步，true异步

console.log(‘步骤三完成‘)

4.发送

xhr.send(null); //如果是post请求，就放post参数，如果是get请求，发送null就行了

5.附：

状态码：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

响应码：

1xx 信息类

2xx 成功 200

3xx 重定向 304

4xx 客户端错误 404

5xx 服务端错误

3,使用ajax发送get请求

html部分：

用户名：

密码：

验证用户名

原生js部分：

var username = document.getElementById("username");var btn = document.getElementById("btn");var ts= document.getElementById("ts");//点击btn发送ajax请求

btn.onclick = function(){//1.创建xhr

varxhr;if(window.XMLHttpRequest){ //常规，如果有，直接使用

xhr = newXMLHttpRequest();

}else{ //如果没有，老版本IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}//2.绑定监听函数

xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){

console.log(xhr.responseText)if(xhr.responseText == 1){

ts.innerHTML= "该用户名已经被注册"}else if(xhr.responseText == 0){

ts.innerHTML= "该用户名可以使用"}

}

}

}//3.建立连接

xhr.open("GET","08.PHP?uname=" + username.value,true);//正则验证

//4.发送请求

xhr.send(null)

}//get是直接可以在地址栏中调试

4,使用ajax发送post请求

html:

学生姓名：
学生成绩：

注册

原生js部分：

functionget_id(id){returndocument.getElementById(id);

}var uname = get_id("uname");var score = get_id("score");var btn = get_id("btn");var p01 = get_id("p01");var reg_name = /^[a-z]{3,10}$/g;var reg_score = /^\d{1,2}$/g;var uname_flag = false;

uname.οnfοcus= function(){

reg_name.lastIndex= 0;this.style.border = ‘1px solid #000‘uname_flag= false;

}

uname.οnblur= function(){if(reg_name.test(uname.value)){this.style.border = ‘1px solid #0f0‘;

uname_flag= true;

}else{this.style.border = ‘1px solid #f00‘}

}

btn.οnclick= function(){if(uname_flag){//1.

varxhr;if(window.XMLHttpRequest){ //常规，如果有，直接使用

xhr = newXMLHttpRequest();

}else{ //如果没有，老版本IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}//2.

xhr.onreadystatechange = function(){if(xhr.readyState == 4){if (xhr.status == 200) {

console.log(xhr.responseText);

p01.innerHTML=xhr.responseText;

}

}

}//3.

xhr.open(‘POST‘,‘http://localhost:8888/0220ajax/09.PHP‘,true);//3.5 在发送post请求的时候，你得告诉服务器你发送的是一个什么

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//4.发送

xhr.send(‘strName=‘ + uname.value + ‘&strscore=‘ +score.value);

}

}

5,使用jQuery—ajax发送get请求

用户名：

密码：

验证用户名

$("#btn").click(function(){

$.ajax({

type :"GET",url :"01.PHP?uname=" + $("#username").val(),success :function(data){ //就是原生的xhr.responseText

console.log(data);if(data == 0){

$("#ts").html("该用户名可以使用").css("color","green");

}else if(data == 1){

$("#ts").html("该用户名已被占用").css("color","red");

}

},error :function(err){ //console.log(err)

}

})

})

6,使用jQuery—ajax发送post请求

(html部分与上面相同相同)

$("#btn").click(function(){

$.ajax({

type :"POST",url :"http://192.168.9.154:8888/0221ajax/01.PHP",data : {

uname : $("#username").val()

},error :function(err){ //console.log(err)

}

})

})