AJAX USES post to send data and xml to receive data

2020-05-27 04:41:50
OfStack

Note:

1. To send data with POST, a sentence must be added to the line 2 function: xmlObject.setRequestHeader (" Content-Type ","application/ x-www-form-urlencoded ");

xmlObject.send (data); send

2.3 line function note:

1. Disable caching (recommended, not necessary) : header(" Cache-Control: no-cache ");

2. To use the XML data format, you must add: header(" Content-Type: text/xml; charset = gb2312 "); // I'll write XML here

3. If MYSQL is installed using WAMP5 integrated environment, you must add:

$charset = "gb2312";

mysql_query (" SET character_set_connection = $charset, character_set_results = $charset, character_set_client = binary "); // it is necessary to solve the problem of Chinese scrambled code encryption s

Otherwise it will be scrambled encryption, today I am wasting a lot of time here, I am using ECSHOP GBK version of the default installation of the database

4. If XML is used to receive data, the callback function must be processed in IE and non-IE, otherwise one party will always fail to get XML data

The processing code is as follows:


function getXMLData(tagName)// To obtain XML The data, IE And the IE To deal with 
{
var info;
if(window.ActiveXObject) //IE To retrieve XML File method 
{
var doc = new ActiveXObject("MSxml2.DOMDocument");
doc.loadXML(xmlObject.responseText);
info = doc.getElementsByTagName(tagName);
}
else //--------------------------- non IE To retrieve XML File method 
{
info = xmlObject.responseXML.getElementsByTagName(tagName);
}
return info;
}

The following is I do a provincial and municipal linkage test

The code is as follows:

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> Easy linkage test </title>
<style type="text/css" >
select{
width:100px;
}
</style>
<script type="text/javascript" >
 
var thisId = ""; // Currently operating selectI the D
 
var xmlObject; //ajax  Object global variable, 
 
function getAjaxObject()//AJAX 1 Line no. , return 1 a AJAX  Object engine 
{
var xmlObject ;
if(window.ActiveXObject)
{
xmlObject = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlObject = new XMLHttpRequest();
}
return xmlObject ;
}
 
function ajaxCall(id) //ajax 2 Line no.   , where  post  Passing parameters 
{
xmlObject = new getAjaxObject();
if(xmlObject)
{
var url = "chuli.php";
var data = "id=" + id;
xmlObject.open("post",url,true);
 
xmlObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlObject.onreadystatechange = repayFuncion;
xmlObject.send(data);
}
}

function repayFuncion() //ajax 4 Line no.   , where  xml  Accept the data. There's a little bit more involved here xmldom programming 
{

if(xmlObject.readyState==4 && xmlObject.status==200)
{

var info = getXMLData("res");// To obtain XML data 
$(thisId).length = 0;// clear select  In the option node 
for(i=0;i<info.length;i++)
{
var optionId = info[i].childNodes[0].childNodes[0].nodeValue;
var optionValue = info[i].childNodes[1].childNodes[0].nodeValue;
var optionNode = document.createElement('option');
optionNode.value = optionId;
optionNode.innerText =optionValue;
$(thisId).appendChild(optionNode);
}
}
}

function getXMLData(tagName)// To obtain XML The data, IE And the IE To deal with 
{
var info;
if(window.ActiveXObject) //IE To retrieve XML File method 
{
var doc = new ActiveXObject("MSxml2.DOMDocument");
doc.loadXML(xmlObject.responseText);
info = doc.getElementsByTagName(tagName);
}
else //--------------------------- non IE To retrieve XML File method 
{
info = xmlObject.responseXML.getElementsByTagName(tagName);
}
return info;
}
function $(id)// Common functions, through ID Take the object 
{
return document.getElementById(id);
}
function getProvice()// Access to the province 
{
thisId = "Province";
var id = '1';
ajaxCall(id);
}
function getCity()// To obtain, 
{
thisId = "City";
$("County").length = 0;
var id = $("Province").value;
ajaxCall(id);
}
 
function getCounty()// Access to the county 
{
thisId = "County";
var id = $("City").value;
if($("City").length)
{
ajaxCall(id);
}
}
window.onlaod = getProvice();// Page starts loading 
</script>
</head>
<body>
<form action="javascript:void(0)" method="post">
<label for="username" > User name: </label> <input type="text" name="username" id="username" width="60px" /><br />
<label for="psd" > The secret  &nbsp; Code: </label> <input type="password" name="psd" id="psd" width="80px" /></br>
<label for="psd" > to  &nbsp; Address: </label>
<select id="Province" onclick="getCity()">
</select>&nbsp;
<select id="City" onclick="getCounty()" >
</select>&nbsp;
<select id="County" name="xian" >
</select>
<input type="submit" value=" submit " />
</form>
</body>
</html>

chuli.php


<?php
//3 Line no. 
header("Cache-Control:no-cache");
header("Content-Type: text/xml; charset=gb2312");// Here to write XML
require("function.php");
$id = $_POST['id'];
file_put_contents("my1.txt",$act . "------" . $ziduan);
$result = getresultById($id);
$info = "<mes>";
foreach($result as $row)
{
$info .= "<res>";
$info .= "<id>" . $row['region_id'] . "</id>";
$info .= "<name>" . $row['region_name'] . "</name>";
$info .= "</res>";
}
$info .= "</mes>";
echo $info;

?>

3. Database functions

function.php


<?php
function getresultById($id)
{
$con = mysql_connect("localhost","root","");
if($con)
{
$charset = "gb2312";
mysql_query("SET character_set_connection=$charset, character_set_results=$charset, character_set_client=binary"); // This sentence is necessary to solve the problem of Chinese scrambled encryption s
mysql_select_db("ajax",$con);
$sql = "select * from ecs_region where parent_id = '$id'";
$res = mysql_query($sql);
$arr = array();
while($row = mysql_fetch_assoc($res))
{
$arr[] = $row;
}
return $arr;
}
return false;
}